Tree Shaking 问题 - 汇总，preserveModules 设置为 true

如何解决Tree Shaking 问题 - 汇总，preserveModules 设置为 true

首先与如此出色的库一起工作，该库在 JS 中风靡一时。我真的很喜欢贡献者如何不断推动自己使这个库变得更加强大。

实际上，我一直在使用 rollup 来捆绑我在原子设计模式上用 React 编写的组件库。然而，当我的消费应用安装这个库时，我得到了这个库的所有组件。

我的库代码结构为

components
   atoms
     Button
      button.jsx
      index.js (this exports the button as default)
    index.js (exports all other atoms as named exports)
   molecules
    Modal
     Modal.jsx
    index.jsx(exports modal as default)
   index.js (exports all other molecules as named exports)
index.js(exports all atoms and molecules as named exports)

我的汇总配置如下：

import path from "path";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import svgr from "@svgr/rollup";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import copy from "rollup-plugin-copy";
import json from "@rollup/plugin-json";
import builtins from "rollup-plugin-node-builtins";
import svgoptions from "../shared/svg-loader-options.json";
import moduleDirectories from "../shared/module-directories.json";
import { main,module } from "../../../package.json";

const baseDir = path.join(__dirname,"../../../");

const { NODE_ENV } = process.env;

export default {
input: path.join(baseDir,"src","index.js"),output: [
{
file: path.join(baseDir,main),format: "cjs",sourcemap: true,},{
file: path.join(baseDir,module),format: "es",],plugins: [
peerDepsExternal(),replace({
  "process.env.NODE_ENV": JSON.stringify(NODE_ENV),}),svgr(svgoptions),nodeResolve({
  preferBuiltins: true,extensions: [".js",".jsx"],customresolveOptions: {
    moduleDirectory: moduleDirectories,babel({
  babelHelpers: "bundled",exclude: "node_modules/**",builtins(),json(),commonjs(),copy({
  targets: [{ src: "src/assets/fonts/*",dest: "dist/assets/fonts" }],};

我的项目的

package.json 如下所示：

{
"name": "abc-package","version": "0.x.x","description": "","main": "dist/index.js","module": "dist/index.esm.js","husky": {
"hooks": {
"pre-push": "npm run lint && npm test"
}
},"scripts": {
"build": "cross-env NODE_ENV=production rollup --config "./internals/build/rollup/rollup.config.js"","lint": "eslint "./src//*.js?(x)" "./internals//*.js?(x)"","lint:fix": "npm run lint -- --fix","start": "cross-env NODE_ENV=dev start-storybook -p 9001 -s ./src/assets","storybook:build": "cross-env NODE_ENV=prod build-storybook --quiet -o "./styleguide-site" -s ./src/assets","test": "jest","test:snapshot": "percy-storybook --b='./styleguide-site' --output_format=json","test:interaction": "cypress run","test:interaction-debug": "cypress open","add-component": "hygen component new","dsm-storybook:publish": "dsm-storybook publish","dsm-storybook:preview": "dsm-storybook preview"
},"engines": {
"node": "^12.0.0","npm": "^6.0.0"
},"files": [
"/dist"
],"keywords": [],"author": "","peerDependencies": {
"prop-types": "^15.7.2","react": "^16.13.1","react-dom": "^16.13.1","styled-components": "^5.2.0"
},"dependencies": {
"dayjs": "1.9.7","dom-scroll-into-view": "^2.0.1","ramda": "0.27.1","react-modal": "3.11.2","react-popper-tooltip": "4.0.1","react-scroll-to-component": "1.0.2","react-transition-group": "4.4.1","tween": "0.9.0"
},"devDependencies": {
"@babel/core": "7.11.6","@babel/preset-env": "7.11.5","@babel/preset-react": "7.10.4","@cucumber/cucumber": "7.0.0-rc.0","@invisionapp/dsm-storybook": "0.0.144","@percy/cypress": "2.3.3","@percy/storybook": "3.3.1","@rollup/plugin-babel": "5.2.1","@rollup/plugin-commonjs": "15.1.0","@rollup/plugin-json": "4.1.0","@rollup/plugin-node-resolve": "9.0.0","@rollup/plugin-replace": "2.3.3","@storybook/addon-a11y": "6.1.17","@storybook/addon-actions": "6.1.17","@storybook/addon-docs": "6.1.17","@storybook/addon-essentials": "6.1.17","@storybook/addon-knobs": "6.1.17","@storybook/addon-options": "5.3.21","@storybook/addon-viewport": "6.1.17","@storybook/addons": "6.1.17","@storybook/react": "6.1.17","@storybook/theming": "6.1.17","@svgr/rollup": "5.4.0","@svgr/webpack": "5.4.0","acorn": "8.0.1","babel-eslint": "10.1.0","babel-jest": "26.3.0","babel-loader": "8.1.0","babel-plugin-transform-react-remove-prop-types": "0.4.24","bufferutil": "4.0.1","canvas": "2.6.1","core-js": "3.6.5","cross-env": "7.0.3","current-git-branch": "1.1.0","cypress": "6.2.0","cypress-storybook": "0.5.1","enzyme": "3.11.0","enzyme-adapter-react-16": "1.15.5","enzyme-to-json": "3.6.1","eslint": "7.10.0","eslint-config-airbnb": "18.2.0","eslint-config-prettier": "6.12.0","eslint-plugin-better-styled-components": "1.1.2","eslint-plugin-cypress": "2.11.2","eslint-plugin-import": "2.22.1","eslint-plugin-jest": "24.0.2","eslint-plugin-jsx-a11y": "6.3.1","eslint-plugin-prettier": "3.1.4","eslint-plugin-react": "7.21.2","eslint-plugin-react-hooks": "4.1.2","glob": "7.1.6","husky": "4.3.0","hygen": "6.0.4","jest": "26.4.2","jest-styled-components": "7.0.3","pascal-case": "3.1.1","polished": "3.6.7","prettier": "2.1.2","prop-types": "15.7.2","react": "16.13.1","react-dom": "16.13.1","rollup": "2.28.2","rollup-plugin-copy": "3.3.0","rollup-plugin-node-builtins": "2.1.2","rollup-plugin-peer-deps-external": "2.2.3","simple-git": "2.20.1","storybook-addon-pseudo-states": "^1.0.0","styled-components": "5.2.0","svgo": "1.3.2","svgo-loader": "2.2.1","terser-webpack-plugin": "4.2.2","utf-8-validate": "5.0.2","webpack": "4.44.2","webpack-cli": "3.3.12"
}
}

我在一些博客文章中读到过，要使摇树正常工作，您应该使用 preserveModules 标志为真。

这样做时，我在我的 dist 文件夹中获得了 node_modules 并且由于 node_modules 在应用程序中使用时被 npm/yarn 弄平，因此当使用程序中使用的包（构建使用webpack），这已经在问题中跟踪 - https://github.com/rollup/rollup/issues/3684

我尝试通过将捆绑包中的 node_modules 和相关路径命名为“外部”来解决此问题，之后包捆绑得非常好，摇树也是如此，但是当包在应用程序中被使用时，应用程序就会崩溃。这已经是我无法找到任何解决方案的汇总问题之一 - 并且处于关闭状态 - https://github.com/rollup/rollup-plugin-commonjs/issues/374

我有点陷入僵局，不确定前方的路是什么。我非常需要支持，由于汇总中的瓶颈和现有问题，您能否提出真正意义上使此库树可动摇的最佳方法。

解决方法

您是否尝试使用 rollup-plugin-rename-node-modules 进行重命名？

https://github.com/Lazyuki/rollup-plugin-rename-node-modules

import renameNodeModules from 'rollup-plugin-rename-node-modules'

export default {
  plugins: [renameNodeModules('external')]
};