结合使用Babel和JavaScript

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

上面的代码有效，我能够看到输出，但是现在如果我将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和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 。

1. 确保已安装：

    > npm i -D babel-preset-es2015 

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

   1. 创建.babelrc文件并在此处指定预设：

       { "presets": ["es2015"] } 

   2. 使用query属性指定预设：

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