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

【问题标题】：Using webpack without transforming es6 to es5 code使用 webpack 而不将 es6 转换为 es5 代码
【发布时间】：2017-01-07 00:54:44
【问题描述】：

我有一个项目才几个月，我决定用 ES6 编写它来学习新系统。（我非常喜欢）。该项目是一个复杂的 WebGL 渲染器。

最初我只是在浏览器中使用了 es6（不使用模块功能），并且在我的 HTML 中简单地使用了很多导入语句（丑陋）。随着班级数量的增加，这变得难以管理。

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

我使用 webpack 将我的代码转换为单个 es5 (CommonJS) 模块。所有功能保持不变。耶！

但是，在某些情况下，性能会显着降低。现在我的一些代码已经转换为 es5 以一半的速度运行。（这与我在此页面中看到的数据 https://kpdecker.github.io/six-speed/ 相违背）。

我想在不转换 es6 -> es5 的情况下使用 Webpack 进行测试。本质上只是利用 webpacks 将我的模块捆绑到一个文件中的能力。

我对 webpack 完全陌生，我一直在尝试弄乱 babel 转换我的代码的方式，但不知道如何简单地禁用大多数转换。我唯一想要转换的是模块导入/导出。

谁能帮我解决这个问题？

附：我确实认为我的项目表明 es6 在某些实际用例中比 es5 快得多，这有助于证明我从一开始就选择 es6 的决定是正确的。

【问题讨论】：

标签： webpack ecmascript-6 babeljs es6-module-loader

【解决方案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 语句......而且它不会做任何事情。您可以根据需要添加其他转换，其他所有内容都将按照作者的方式传递。

【讨论】：

谢谢顺便说一句。我非常分心，但这正是我所需要的！

【解决方案2】：

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

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

【讨论】：

我尝试简单地删除 babel 加载程序，但随后出现以下错误：ERROR in ./src/Sapphire.js Module parse failed: D:\Projects\MatterMachine\SapphireClient\node_modules\eslint-loader\index.js!D:\Projects\MatterMachine\SapphireClient\src\Sapphire.js Line 3: Unexpected token You may need an appropriate loader to handle this file type. 抱歉，我应该将其包含在我的问题中。

【解决方案3】：

如果你只是想将你的 js 文件打包成一个，那么你不需要使用 webpack。 Webpack 更多，如果你想做编译、模块加载、代码拆分等等，请感染你使用 webpack。为了缩小而不做任何这些步骤，你可以使用简单的工具，比如 gulp。如果你仍然想使用 webpack，那么不要编译你的 js 文件，不要使用任何加载器。

【讨论】：