Question

我正在尝试编写我的第一个babel程序并且卡住了。

我写了脚本1

var message = "Hello World";
module.exports = message;

和script2

var message = require('./script1');
document.write(`This is formatted with ES6 ${message}`);

我的webpack.config.js看起来像

module.exports = {
    entry: {
         main: [
            './script1.js',
            './script2.js'
        ]
    },
    output: {
        filename: "./public/[name].js"
    },
    loaders: {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
    }
}

以上代码有效，我能看到输出，但现在我将脚本2修改为

import message from './script1';
document.write(`This is formatted with ES6 ${message}`);

然后当我运行webpack时，它说

ERROR in ./script2.js
Module parse failed: /Users/a.c/MyProjects/ReactTutorial/script2.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import message from './script1';
| document.write(`This is formatted with ES6 ${message}`);
 @ multi main

我的理解是，因为我正在使用babel，所以我应该能够使用新的ES6方式将内容轻松导入到我的代码中。

Answer 1

尝试将resolve.extensions添加到配置文件（为了避免在导入.js或.jsx文件时始终写入扩展名），如果您使用的是babel 6，则需要安装情侣套餐babel-preset-es2015和babel-preset-react

module.exports = {
    entry: {
         main: [
            './script1.js',
            './script2.js'
        ]
    },

    output: {
        filename: "./public/[name].js"
    },

    loaders: {
        test: /\.jsx?$/, // or /\.(js|jsx)$/
        exclude: /node_modules/,
        loader: 'babel',
        query: {
           presets: ['es2015', 'react']
        }
    },

    resolve: {
        extensions: ['', '.js', '.jsx']
    }
 }

Answer 2

您很可能忘记为babel指定es2015 preset。

确保已安装：
```
> npm i -D babel-preset-es2015
```

您有两个选项可以为babel指定此预设。

创建.babelrc文件并在那里指定预设：
```
{
    "presets": ["es2015"]
}
```

使用query property指定预设：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      include: /src/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

使用带有JavaScript的Babel

我写了脚本1

和script2

我的webpack.config.js看起来像

2 个答案: