@hezebin/doraemon v1.0.34

哆啦 A 梦（Doraemon）

一些常用的公共组件、工具、常量等，使用 Rollup 进行编译打包。

0.开发测试组件

安装 eslint、prettier、editor 来规范代码风格：

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint \
eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-import eslint-plugin-unused-imports eslint-import-resolver-typescript

开发完成组件后，可在本地启动 React 项目验证、测试组件功能：

yarn start

1.入口文件统一导出组件

在 src/index.ts 入口文件中将编写好的全部组件统一抛出，如：

export { default as Test } from './components/test/index'
export { SSO_HOST, ENTRY_HOST } from './constant/host/index'

2.安装 Rollup 和常用插件

yarn add -D rollup
# 配置文件支持 ts
yarn add -D @rollup/plugin-typescript
# 打包压缩插件
yarn add -D @rollup/plugin-terser
# 解析图片, 支持导入 JPG, PNG, GIF, SVG, 和 WebP 文件
yarn add -D @rollup/plugin-image
# 不同于 @rollup/plugin-image 只能生成内联 data URI 形式，它在生成内联 data URI 和生成单独的文件之间自动选择
yarn add -D @rollup/plugin-url
# json 解析插件
yarn add -D @rollup/plugin-json
# 外部依赖查找插件
yarn add -D @rollup/plugin-node-resolve
# css 相关解析
yarn add -D rollup-plugin-postcss
# commonjs 转化为 es5, 需要在其他类似工具前面，避免破坏对CommonJS的检测
yarn add -D @rollup/plugin-commonjs
# 自动将外部类库声明为 externals，包含 dependencies, devDependencies, peerDependencies, optionalDependencies及NodeJS内置模块
yarn add -D rollup-plugin-node-externals
# babel 处理, 将 es6/es7 代码编译转换为 es5
yarn add -D @rollup/plugin-babel @babel/core @babel/preset-env @babel/preset-react
# 打包前清除旧资源
yarn add -D rollup-plugin-clear

在项目根目录下创建一个名为 rollup.config.mjs 的配置文件，配置参考： https://cn.rollupjs.org/configuration-options

3.配置 package.json 文件：

添加一个名为 build 的脚本，并配置要发布的组件包的基础信息：

name: 包名称

• version: 包版本
• main: 包的入口文件
• files: 打包包含的文件列表
• types: 类型声明入口文件

{
  "name": "@ihezebin/doraemon",
  "version": "1.0.0",
  "main": "dist/bundle.js",
  "types": "dist/bundle.d.ts",
  "module": "dist/bundle.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c rollup.config.mjs --configPlugin typescript"
  }
}

4.编译打包

运行 yarn build 命令来执行打包。如果一切顺利，将在项目根目录下创建一个名为 dist 的文件夹，并在其中包含一个名为 bundle.js 的文件。

5.本地调试链接该组件包

1.在该发布组件包的项目根目录中执行

yarn link

控制台会输出 package.json 中的 name；

2.在本地其他想要使用该组件的项目中链接上面的本地包名

yarn link @ihezebin/doraemon

然后就可以在项目中直接使用该包了。

6.将组件发布到npm

1.切换npm源为官方:

yrm use npm

npm config set registry https://registry.npmjs.org

2.登录

npm login

# Username: hezebin
# Email: 86744316@qq.com

3.发布

npm publish --access public

4.发布结束后切回淘宝源

yrm use taobao

npm config set registry https://registry.npm.taobao.org

7.安装使用组件

yarn add @ihezebin/doraemon

• 使用SDK

import {Test} from '@ihezebin/doraemon'

    ;

<Test></Test>