个性化阅读
专注于IT技术分析

webpack和babel项目使用ES7 async和await出错:ERROR You may need an appropriate loader to handle this file type

在新创建的webpack和babel项目中使用javascript ES7语法及其一些特性如async和await,但是在用webpack构建项目的时候,报如下错误:

ERROR in ./src/server.js Module parse failed: C:\dev\node-async-sample\src\server.js 
Unexpected token (9:22) You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (9:22)

.babelrc文件如下:

{
  "presets": [
    "es2015",
    "node5",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

Webpack配置文件如下:

module.exports = {
  entry: [
    'babel-polyfill',
    './src/server.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'server_bundle.js'
  },
  resolve: {
      extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/src',
        loader: 'babel-loader'
      }
    ]
  }
};

解决办法

首先是上面的配置中路径不对,不应该使用字符串表示路径,应该使用如下方式:

{
   test: /\.jsx?$/,
   include: path.join(__dirname, 'src'),
   loader: 'babel-loader'
}

这样就可以解决解析问题了,但是仍然需要处理.json文件,通过添加相应的扩展解决节,以及添加json-loader:

{ test: /\.json$/, loader: 'json-loader' }

然后还要解决确实的模块警告问题,例如fs和net。建议使用babel-cli预编译服务器代码:

babel src --out-dir dist
赞(0) 打赏
未经允许不得转载:srcmini » webpack和babel项目使用ES7 async和await出错:ERROR You may need an appropriate loader to handle this file type
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏