Webpack Alias 和 ES6 导入/导出答案

【问题标题】：Webpack Alias and ES6 imports / exportsWebpack Alias 和 ES6 导入/导出
【发布时间】：2016-05-27 14:06:32
【问题描述】：

这是一个两部分的问题。

我已经为包含我所有共享 React 组件的特定文件设置了一个名为 controls 的 Webpack 别名。这个文件只是一个 index.js 文件，它导入所有需要的组件（大约 30 个共享组件），然后像这样导出它们：

export { Button, Tabs, ProgressBar, Carousel, … }

组件来自不同的地方（图书馆、我的等）。我对导入的理解是，如果我写

import { Button } from ‘controls';

在我想要使用Button 的项目中的任何地方，只有Button 应该被拉入我的依赖关系树 - 而不是从“controls/index.js”的每个导出。

第一个问题：我对导入/导出方式的理解是否准确？

现在的问题是：所有组件，无论它们是否在特定包中使用，都被拉入每个包中。我很确定这是因为我的 Webpack 别名而发生的。

第二个问题：任何人对我如何仍然可以在一行中干净地导入多个共享组件有任何建议，例如

import { Button, Tabs, InitialsAvatar } from 'controls';

但没有将我的所有控件（也称为共享 React 组件）拉到依赖关系树中？

我玩过 Webpack 的 moduleDirectores 和 root，但是这些不允许我在一行中导入多个组件，也不允许我使用单个 index.js 文件来容纳我的所有共享组件。

【问题讨论】：

webpack v1 不做摇树，如果你是这么想的话。
@FelixKling 好的，所以问题至少部分（如果不是全部）与 Webpack 1 相关，但是 ES6 的导入/导出是否具有本机行为 only导入所需的模块切片，或者行为完全取决于您的模块构建器（webpack 1、webpack 2、systemjs 等）
这取决于模块捆绑器。 ES6 期望在导入任何导出时评估整个模块。

标签： reactjs ecmascript-6 webpack

【解决方案1】：

升级到 webpack 2+，支持 tree-shaking。

现在 Webpack 2+ 只标记未使用的代码并且不会将其导出到模块中。它会提取所有内容并为缩小库留下未使用的代码。

您可以为此使用UglifyJS 和 babel。 UglifyJS 还不支持 Javascript ES2015+ 的新语言特性。您将需要 Babel 将代码转译为 ES5，然后使用 UglifyJS 清理未使用的代码。

你需要 .babelrc 文件：

我们必须告诉预设（在我们的例子中为babel-preset-env）跳过模块转译。

{
  "presets": [
    ["env", {
      "loose": true,
      "modules": false
    }]
  ]
}

以及对应的 webpack 配置：

module: {
  rules: [
    { test: /\.js$/, loader: 'babel-loader' }
  ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: true
    },
    output: {
      comments: false
    },
    sourceMap: false
  })
]

或

Babili 是更好的选择，因为 Babili 会在转译之前删除未使用的代码。在降级到 ES5 之前发现未使用的类要容易得多。 Tree-shaking 也适用于类声明，而不仅仅是函数。

你需要：

npm install babili babili-webpack-plugin --save-dev

在您的 webpack 配置中使用以下插件，如下所示：

plugins: [
  new BabiliPlugin()
]

还有一种使用 babili 作为预设的优化方式。您可以参考他们的网站以将其用作 babel-loader 的预设。

【讨论】：