19

我有一个包含多个反应组件的库，我想让库可以摇树，这样当我导入一个组件时

import { Checkbox } from 'my-react-components'

我不导入整个捆绑包。

我的 index.js 看起来像这样

export { default as Button } from './components/Button'
export { default as Checkbox } from './components/Checkbox'
export { default as FlexView } from './components/FlexView'
export { default as Radio } from './components/Radio'
export { default as Select } from './components/Select'
export { default as TextInput } from './components/TextInput'
export { default as Toggle } from './components/Toggle'

我使用 webpack 捆绑

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve('./lib'),
    filename: 'react-components.js',
    libraryTarget: 'commonjs2',
  },

  // loaders and stuff...
  // terser-webpack-plugin...

  externals: {
    // don't include react in the bundle
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
  },
  optimization: {
    splitChunks: false,
    sideEffects: false,
  },
}

在我的 babel 配置中，我当然有

['@babel/preset-env', {
  modules: false,
}]

使用此设置，当我只导入一个组件并包含整个包时（导入时我也在使用 webpack）。我该如何防止这种情况？

4

4 回答 4

3

截至 2020 年 2 月，Webpack 无法实现。

因为 tree-shaking 机制严重依赖 ES6import/export而 Webpack 目前不支持output.libraryTarget.

作为替代方案，您可以将您的库与其他捆绑器捆绑在一起，例如 Rollup（它确实支持库的 ES6 模块）。

您可以在此处跟踪此功能：https ://github.com/webpack/webpack/issues/2933

更新：虽然有 hacky 解决方法：https ://stackoverflow.com/a/60010871/921193

于 2020-02-13T21:33:21.920 回答
1

我相信你也需要你的module财产package.json

{
   ...
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   ...
}
于 2019-10-10T10:42:47.067 回答
1

我可以通过直接从库的 lib 文件夹中导入文件来完成这项工作，而不仅仅是单独命名库。

就我而言，我从 Reactstrap 库中导入了一些组件，如下所示：

import Button from 'reactstrap/lib/Button';
import UncontrolledPopover from 'reactstrap/lib/UncontrolledPopover';
import PopoverHeader from 'reactstrap/lib/PopoverHeader';
import PopoverBody from 'reactstrap/lib/PopoverBody';
于 2019-11-09T04:59:35.450 回答
0

有一个有效的babel 插件可以帮助根据您指定的规则转换您的导入。

[
   'transform-imports', // or 'babel-plugin-transform-imports'
   {
     'react-router': {
       transform: 'react-router-dom/${member}',
       preventFullImport: true
     },
     reactstrap: {
       transform: 'reactstrap/lib/${member}',
       preventFullImport: true
     }
   }
]

注意： preventFullImport如果您想确保对该路径的导入是可摇树的，这很有用。

这只是另一种实现方式，可帮助您有效地对未使用的导入进行树摇动。但从长远来看，直接导入每个文件将是最佳实践。

import Button from 'reactstrap/lib/Button';
import UncontrolledPopover from 'reactstrap/lib/UncontrolledPopover';
于 2020-02-02T01:58:09.937 回答