使用webpack而不将es6转换为es5代码

Question

我有一个只有几个月的项目,我决定在ES6中编写它以学习新系统.(我很喜欢).该项目是一个复杂的WebGL渲染器.

最初我只是在浏览器中使用es6(不使用模块功能),只是在我的HTML中使用了很多import语句(丑陋).随着课程数量的增加,这变得无法控制.

现在我第一次学习webpack和babel.我的目标是将所有模块以es5或es6格式组合在一起.

我使用webpack将我的代码转换为单个es5(CommonJS)模块.所有功能都保持不变.好极了!

但是,在某些情况下,性能已经大大降低.我的一些代码运行速度只有它已转换为es5的一半.(这违反了我在本页中看到的数据https://kpdecker.github.io/six-speed/).

我想使用Webpack测试而不转换es6 - > es5.基本上只是利用webpacks将我的模块捆绑到一个文件中的能力.

我对webpack完全不熟悉,而且我一直试图弄乱babel转换代码的方式,但无法弄清楚如何简单地禁用大多数转换.我唯一想要转变的是模块导入/导出.

任何人都可以帮我解决这个问题吗？

PS我认为我的项目指出es6在某些现实世界的用例中要比es5快得多,并且有助于证明我决定从一开始就使用es6.

Answer 1

而不是使用"预设"插件集(如"es2015"),只需使用transform-es2015-modules-commonjs插件本身.

这是webpack配置的示例,但您也可以在.babelrc以下位置执行此操作:

// webpack.config.js
{
  module: {
    loaders: [
      {
        test: /\.js$/i,
        loader: 'babel',
        query: {
          plugins: ["transform-es2015-modules-commonjs"]
        }
      }
    ]
  }
}

这会将import语句转换为require语句和export语句转换为module.exports = value语句......并且它不会做任何其他事情.您可以根据需要添加其他变换,其他所有内容都将作为创作者传递.

Answer 2

我猜你使用babel-loader？只需删除Webpack 配置中文件babel的加载器即可：.js

module: {
  loaders: [
    // Remove this:
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }
  ]
}