React组件发布私有仓库

安装私有NPM仓库

• 安装python 2.7 或以上版本
• npm install -global verdaccio --unsafe-perm
• 启动命令：verdaccio
• 加入用户(客户端)：npm adduser --registry http://localhost:4873
  
• 项目发布：npm publish --registry http://localhost:4873

开发组件
参考文章：
https://blog.harveydelaney.com/creating-your-own-react-component-library/

1：create-react-app 新建项目(用typescript)，添加组件
2：安装StoryBook
3：安装Rollup，为React组件打包
npm i -D rollup rollup-plugin-typescript2 @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss node-sass

以下是重点

1. 根目录下添加.babelrc
   {
   "presets": ["@babel/env", "@babel/preset-react"]
   }

2. 打开package.json, 删除private节点，添加以下配置
   "version": "0.1.6",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": ["build"],

3. 从dependencies中删除掉
   "react": "^17.0.1",
   "react-dom": "^17.0.1",
   新建peerDependencies节点：
   "peerDependencies": {
   "react": "^17.0.1",
   "react-dom": "^17.0.1"
   },

4. 删除 "build": "react-scripts build", 添加以下：
   "build-storybook": "build-storybook -s public",
   "build": "rollup -c",
   "build-watch": "rollup -c -w",
   "prepublishOnly": "npm run build"

5. 添加rollup.config.js
   import peerDepsExternal from "rollup-plugin-peer-deps-external";
   import resolve from "@rollup/plugin-node-resolve";
   import commonjs from "@rollup/plugin-commonjs";
   import typescript from "rollup-plugin-typescript2";
   import postcss from "rollup-plugin-postcss";

const packageJson = require("./package.json");

export default {
input: "src/index.tsx",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ useTsconfigDeclarationDir: true }),
postcss()

]
};

6. 修改tsconfig.json添加以下：
   "declaration": true,
   "declarationDir": "build",

7. 将要输出的组件放到index.tsx中
   export { default as HelloWorld } from './HelloWorld';
   export { StyledButton } from './Components/StyledButton';
   export { default as SimpleComponent } from './Components/SimpleComponent';

8. npm run build
   npm publish --registry http://localhost:4873

9. 客户端安装
   npm install ebd.front.lib --registry http://localhost:4873

10. eslint + prettier, 安装以下依赖到devDependencies
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.1.2",

根目录下新建: .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

新建.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "endOfLine":"auto"
}

附上源码：
https://github.com/992990831/CustomComponentLib