webpack可以将js转换为es6吗?

时间:2018-10-19 06:43:40

标签: javascript node.js webpack ecmascript-6 webpack-4

我使用webpack捆绑我的节点应用程序。

我在webpack从const转换为var的捆绑包中看到了结果。这意味着webpack将我的文件转换为es5。

如何告诉webpack转换为es6? (请保持const原状和/或使用import关键字)

app.js

import {test} from './some';

const x = 1;

console.log('test', test);
console.log('this should be const in the bundle, not var. ', x);

捆绑是:

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _some__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./some */ "./some.js");

var x = 1;
console.log('test', _some__WEBPACK_IMPORTED_MODULE_0__["test"]);
console.log('this should be const in the bundle, not var. ', x);

/***/ }),

我的webpack配置:

const path = require('path');

module.exports = () => [
  {
    mode: 'development',
    entry: path.resolve(__dirname, './app.js'),
    output: {
      path: path.resolve(__dirname, './dist')
    },
    devtool: 'source-map',
    target: 'node',
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
];

1 个答案:

答案 0 :(得分:2)

您正在使用@babel/preset-env,而没有任何选择。这样会将代码转换为ES5,文档说明实际上不建议以这种方式使用它。 “ env”预设的全部要点是,您提供了一个目标平台,它将自动应用该平台所需的转换。传递“ targets.node” -option值true或“ current”将转换当前使用的node-version的代码。将此选项与预设一起使用还具有其他优势,如果新的node.js支持更多使用的ES功能,则升级node.js将不需要Babel配置的任何更改,并且将转换更少的代码。

node.js中对ECMAScript模块的支持仍处于试验阶段,但是您可以通过将false传递给“ modules” -option来禁用模块转换。

options: {
    presets: [[
        '@babel/preset-env',
        {
            targets: {
                node: "current"
            },
            modules: false
        }
    ]]
}