将Babel与JavaScript结合使用

Use Babel with JavaScript

本文关键字：结合 JavaScript Babel      更新时间：2023-09-26

我正在尝试编写我的第一个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方式轻松地将内容导入到我的代码中。

尝试将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']
    }
 }

很可能您忘记为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']
      }
    }
  ]
}
相关文章：