react-btn-library v1.0.1

开发一个 react 插件，发布到 npm

目录结构

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

配置 rollup.config.js

import babel from "rollup-plugin-babel";
export default {
  input: "./src/index.js", // 必须
  output: {
    file: "./lib/bundle.js",
    format: "cjs",
  },
  plugin: [babel()],
};

配置 .babelrc 解析 jsx 语法

{
  "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 的入口文件

package.json

{
  "main": "lib/bundle.js"
}

使用 npm link 链接到全局

将 react-btn-library 包链接到全局环境下

npm link

另起一个react项目，引入 Switch 组件

1. 将全局 react-btn-library 包，链接到当前项目 node_modules/ 目录下

npm link react-btn-library

2. 引入组件，使用

import {Switch} from 'react-btn-library'
<Switch />

美化组件

FAQ:

1. 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
2. 将依赖写入 external 配置项
   报错信息：
   (!) Unresolved dependencies
   https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
   react (imported by src\Components\Switch.js)

参考文献：

1. https://www.rollupjs.com/
2. https://www.dazhuanlan.com/pythonpeixun/topics/1022946
3. https://www.framer.com/docs/component/