Question

这是一个两部分问题。

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

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

组件来自不同的地方（图书馆，矿山等）。我对进口的理解是，如果我写

import { Button } from ‘controls';

我的项目中我要使用Button的任何地方，只应将Button拉入我的依赖关系树 - 而不是每次从＆＃39; controls / index.js＆＃39;中导出。

第一个问题：我对进口/出口在这里工作的方式的理解是准确的吗？

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

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

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

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

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

Answer 1

升级到webpack 2+，它支持树摇动。

现在，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之前，更容易发现未使用的类。树摇动也适用于类声明，而不仅仅是函数。

您将需要：

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

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

plugins: [ new BabiliPlugin() ]

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

Webpack别名和ES6导入/导出

1 个答案: