lib 存放打包后的代码
src
--components 组件
--Switch 按钮组件
--index.js 入口文件
package.json
rollup.config.js rollup 配置文件
yarn init -y
yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react @emotion/babel-preset-css-prop -D
import babel from "rollup-plugin-babel";
export default {
input: "./src/index.js", // 必须
output: {
file: "./lib/bundle.js",
format: "cjs",
},
plugin: [babel()],
};
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
yarn run rollup -c
package.json
{
"scripts": {
"build": "yarn run rollup -c",
"build": "yarn run rollup -c -w"
}
}
package.json
{
"main": "lib/bundle.js"
}
将 react-btn-library 包链接到全局环境下
npm link
- 将全局 react-btn-library 包,链接到当前项目 node_modules/ 目录下
npm link react-btn-library
- 引入组件,使用
import {Switch} from 'react-btn-library'
<Switch />
- You have passed an unrecognized option
报错信息:
(!) You have passed an unrecognized option Unknown input option: plugin. Allowed options: acorn, acornInjectPlugins, cache, chunkGroupingSize, context, experimentalCacheExpiry, experimentalOptimizeChunks, experimentalTopLevelAwait, external, inlineDynamicImports, input, manualChunks, moduleContext, onwarn, perf, plugins, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch
解决方法:
配置文件中的 plugins 打成 plugin
参考资料:
[https://github.com/rollup/rollup/issues/2682] - 将依赖写入 external 配置项
报错信息:
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
react (imported by src\Components\Switch.js)