将 Babel 与 JavaScript 一起使用

Question

我正在尝试编写我的第一个 babel 程序，但有点卡住了。

我写了脚本 1

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

和脚本2

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'
    }
}

上面的代码有效，我可以看到输出，但现在如果我将 script2 修改为

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 and 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']
      }
    }
  ]
}

将 Babel 与 JavaScript 一起使用

Use Babel with JavaScript

javascript

webpack

babeljs

我写了脚本 1

和脚本2

我的webpack.config.js长得像