Question

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

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

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

我使用webpack将我的代码转换为单个es5（CommonJS）模块。所有功能都保持不变。好极了！

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

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

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

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

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

Answer 1

而不是使用＆＃34;预设＆＃34;插件集（例如＆＃34; es2015＆＃34;）只需使用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语句......并且它不会做任何事情 else。您可以根据需要添加其他变换，其他所有变换都将作为创作传递。

Answer 2

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

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

Answer 3

如果您只想将js文件捆绑成一个，那么您不需要使用webpack。如果你想进行编译，模块加载，代码分割和更多的东西，Webpack还有更多，感染你使用webpack。如果只是缩小而不做任何这些步骤，你可以使用像gulp这样的简单工具。如果你仍然想要使用webpack然后只是不编译你的js文件，不要使用任何加载器。

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

3 个答案: