背景

每次写代码都是去copy以前的代码，修修改改，搬代码很累的。作为一个标准的copy工程师，想要拥有适合自己业务开发的组件库，下一次直接引用就好了

准备工作

使用 storybook 书写组件文档，因为pc端同事用的就是这个，使用简单，上手快

安装 npx sb init // npm version 5x 版本才可以使用 npx 命令，可以避免安装全局模块，调用项目内部安装的模块

启动 npm run storybook

文档书写每一个组件文件夹内建立文件**.stories.tsx文件，用来写组件的用法；写法就和写react文件一模一样

import React from 'react';
import { storiesOf } from '@storybook/react' // storybook使用的库

import Cakendar from './index';

const defaultCakendar = () => (
  <div className='story-header'>Button 按钮
  <Cakendar/>
  </div>

)
storiesOf('Cakendar', module).add('Button按钮', defaultCakendar)// 显示在页面上面

简单的组件demo写好了

打包 tsc // 因为项目使用的是ts

进行 npm 发包

没有使用过npm发包就使用 npm adduser

npm 登陆 npm login

npm 发包 npm publish

相关配置文件

ts.config.json

{
  "compilerOptions": {                  /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                        /* Report errors in .js files. */
    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "emitDeclarationOnly": true,                   /* Concatenate and emit output to single file. */
    "outDir": "./lib/",                        /* Redirect output structure to the directory. */
    "rootDir": "./src/",          
    "strict": true,                
    "esModuleInterop": true,   
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

rollup.config.js 为了解决公共组件打包图片的问题

import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import image from '@rollup/plugin-image';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.tsx',
  output: {
    dir: 'lib',
    format: 'cjs',
  },
  plugins: [
    image(),
    typescript({
      lib: ['DOM', 'ES2015'],
      target: 'es5',
      jsx: 'react',
      allowSyntheticDefaultImports: true,
    }),
    commonjs(),
    nodeResolve(),
  ],
  external: ['react', 'react-dom',],
};

package.json

{
  "name": "xhb-lib-demo",
  "version": "1.0.6",
  "description": "",
  "main": "lib/index.js",//指定入口文件
  "scripts": {
    "start": "start-storybook -p 6006",
    "build": "rimraf lib && tsc --project ts.config.json && rollup -c && node-sass ./src/styles/index.scss ./lib/index.css",
    "build-css": "rimraf lib && node-sass ./src/styles/index.scss ./lib/index.css"// 打包css文件
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@rollup/plugin-babel": "^5.2.0",
    "@rollup/plugin-commonjs": "^15.0.0",
    "@rollup/plugin-image": "^2.0.5",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-typescript": "^5.0.2",
    "rollup": "^2.26.3",
    "tslib": "^2.0.1",
    "typescript": "^3.9.7"
  }
}

开始开发

按照正常的逻辑写代码就好了。以前怎么写现在怎么写。

我们采用的是 material 集成。就是改改他的样式，改成我们想要的样子。

material 可定制好程度很高，我们可以根据他们进行二次封装

组件编写

material ui 的颗粒化很细，可定制化强，还有可定制的主题

可定制的主题。

我们根据自己的业务进行结合进行二次封装，社区的维护和更新都很不错

像写js一样写css，可扩性蛮好的，如果喜欢的也是也一个很不错的优点

遇到的问题

tsc 打包的时候没有把静态资源图片打包进去，解决问题，使用rollup.config.js解决

ts 无法识别 require 引入的图片，会导致打包不成功，需要通过使用 import 来引用图片。但是import引用图片会出现一个ts无法识别.png 的后缀。已经打包不成功。解决方案建立 typings.d.ts 在文件里面写 declare module ‘*.png’; 就可以解决问题

src文件没有index.tsx 导出文件，导致打包的lib缺少引用。使用的时候一直报错

独立的 css 打包不到文件里面去，解决方案，利用node-sass 给 css的样式单独打包，

demo 地址

感谢

全程感谢大佬elowes的协助，本来啥不知道的，忽然知道了一点点

sunseekers

公共组件库从集成到发布

背景

准备工作

相关配置文件

开始开发

组件编写

遇到的问题

感谢

文档信息

Search

Table of Contents