首先，有这么一个出色的库，它在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",
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"
}
}
我在一些博客文章中读到，为了让摇树正常工作，应该使用preserveModules标志为true。
在这样做的时候，我在dist文件夹中获得node_modules，由于node_module在应用程序中使用时会被npm/yarn压扁，因此当它试图从node_moduls解析消费应用程序中所使用的包(使用webpack构建(时，构建会中断，这已经在问题中得到了跟踪-https://github.com/rollup/rollup/issues/3684
我试着通过将捆绑包中的node_modules和相关路径命名为"external"来解决这个问题，之后包捆绑得很好，树也会抖动，但当包在应用程序中使用时，应用程序会崩溃。这已经是我找不到任何解决方案的汇总问题之一，并且处于关闭状态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')]
};