如何使樱桃采摘react组件库如 lodash & date/fns

IT技术 reactjs npm webpack package publish
2021-05-13 01:13:19

我制作了一个包含 20-25 个不同组件的小型库，并制作了一个 npm 包。

我的react项目，我想在其中使用这些组件，有许多页面[路由] 使用延迟加载，因此每个页面都有自己的包。

但是当我在我的主页 [App.js] 上写声明时。

    import { MyModal } from 'my-react-lib';

每个组件都加载到主页包中。所以我的初始加载性能最差。[2Mb 初始包大小]

我已经阅读了试图在 webpack 中甚至使用 rollup 实现的树摇动和事件的概念，但它们只制作 bundle.js 而不是按照我的要求。

我愿意像进出口一样实现樱桃采摘。与 date-fns 和 lodash 相同。

      import format from 'date-fns/format';
      import debounce from 'lodash/debounce';

如何实现这一目标？

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';
2个回答

Rollup 允许你将你的库分成几个独立的块。您必须提供一个对象，将名称映射到入口点，以及汇总配置的输入属性。它看起来像这样：

input: {
    index: 'src/index.js',
    theme: 'src/Theme',
    badge: 'src/components/Badge',
    contentCard: 'src/components/ContentCard',
    card: 'src/elements/Card',
    icon: 'src/elements/Icon',
    ...

src/index.js 看起来像这样：

export { default as Theme } from './Theme'
export { default as Badge } from './components/Badge'
...

看看汇总的文档：https : //rollupjs.org/guide/en/#input

该输出被设定为一个目录：

output: [
  {
    dir: 'dist/es',
    format: 'es',
  },
],

然后在 package.json 中声明入口点，如下所示：

"module": "dist/es/index.js",

然后可以导入库的module：

import { Theme, Badge } from 'your-component-library'

您可能需要单独打包它们。

例如Material-UI，它有很多部分。当我们正常使用时

npm install @material-ui/core

如果你查看他们的源代码，你会发现有多个包，每个包都有自己的package.json文件

例如@material-ui/core pacakge.json

{
  "name": "@material-ui/core",
  "version": "4.9.7",
  "private": false,
  "author": "Material-UI Team",
  ...
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "@material-ui/styles": "^4.9.6",
    "@material-ui/system": "^4.9.6",
    "@material-ui/types": "^5.0.0",
    "@material-ui/utils": "^4.9.6",

这意味着它们实际上是分开的，并且彼此有依赖关系。

嗯，这就是范围。

其它你可能感兴趣的问题
上一篇ReactJs：使用门户“模式”包装语义 UI 模态 下一篇我的 3D 打印部件在大约 1 厘米高后开始弯曲，蓝色胶带从床上分离