【发布时间】：2021-07-28 17:11:31
【问题描述】：
首先，出色的工作与如此出色的库在 JS 中的捆绑风靡一时。我真的很喜欢贡献者如何不断推动自己使这个库变得更加强大。
实际上，我一直在使用 rollup 来捆绑我用 React on atomic design pattern 编写的组件库。然而，当我的消费应用安装这个库时，我得到了库的所有组件。
我的库代码结构为
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",
sourcemap: true,
},
],
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"
}
}
我在一些博客文章中读到，要使 tree shaking 正常工作，您应该使用 preserveModules 标志为 true。
这样做时，我在我的 dist 文件夹中获得了 node_modules，并且由于在应用程序中使用时 node_modules 被 npm/yarn 展平，因此当使用的应用程序中使用的包尝试从 node_modules 解析时，构建会中断（使用构建webpack），这已经在问题中跟踪了 - https://github.com/rollup/rollup/issues/3684
我尝试通过将包中的 node_modules 和相关路径命名为“外部”来解决此问题，之后包完美地捆绑在一起，摇树摇晃也是如此，但是当在应用程序中使用包时，应用程序会崩溃。这已经是汇总问题之一，我找不到任何解决方案 - 并且处于关闭状态 - https://github.com/rollup/rollup-plugin-commonjs/issues/374
我有点陷入僵局，不确定前进的方向。由于存在瓶颈和汇总中存在的问题，我迫切需要支持，您能否建议让这个库树真正可动摇的最佳方法。
【问题讨论】：
标签： rollup tree-shaking