前端组件化实践(bookstory+rollup+lerna+typescript)-react组件

最新推荐文章于 2024-04-23 10:04:21 发布

陨落的轨迹

最新推荐文章于 2024-04-23 10:04:21 发布

阅读量1.2k

点赞数

文章标签：前端 npm storybook lerna rollup

本文链接：https://blog.csdn.net/u013938465/article/details/125781245

版权

前期准备：

需要有一个github或者gitlab账号的代码仓库，还要有一个npm仓库的账号。这两个账号公网或者私网都可以。

创建项目

新建一个项目，我是在github上创建的测试项目，可以随意发挥：

克隆项目到文件夹，我这里克隆到了D:\webPro。

cmd进入到D:\webPro，执行等等安装完成：

npx create-react-app cookie-test-pkg --template typescript

搭建 storybook react环境

npx -p @storybook/cli sb init --type react

项目中会多出.storybook和src/stories目录

执行

npm run storybook

会启动storybook界面，如下图所示：

使用Lerna来管理包

全局安装lerna

npm install lerna -g

lerna init

创建一个包，我这里定义一个叫cookieButton，会发现packages多了一个目录

lerna create cookieButton

为了支持typescript，还需要单独安装相关插件依赖

npm install -D @storybook/preset-create-react-app @storybook/react

将lib重命名为src，因为之后打包想使用lib目录名，故此修改（不改也是可以的）

根据目录增加以下文件

文件代码，自取：

//src/CookieButtuon.tsx

import React from 'react'
import './CookieButton.scss'
export interface ButtonProp {
  bgcolor: String
  color: String
  name: String
}
function CookieButton({ bgcolor, color, btnname }) {
  return (
    <button
      className="cookie-btn"
      style={{ color: color, backgroundColor: bgcolor }}
    >
      {btnname}
    </button>
  )
}

export default CookieButton

// src/CookieButton.scss

.cookie-btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

//src/index.tsx

import CookieButton, { ButtonProp } from './CookieButton'

export { CookieButton, ButtonProp }

// src/index.stories.tsx

import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { CookieButton } from './index'

export default {
  title: 'CookieButton',
  component: CookieButton,
} as ComponentMeta<typeof CookieButton>

//storybook 定义的一种args写法，可以在界面生成配置界面
const Template: ComponentStory<typeof CookieButton> = (args) => (
  <CookieButton {...args} />
)

//示例一
export const defaultButton = Template.bind({})
defaultButton.args = {
  bgcolor: '#f0f0f0',
  color: '#000000',
  btnname: '按钮',
}

//示例二
export const BlackButton = Template.bind({})
BlackButton.args = {
  bgcolor: '#333333',
  color: '#ffffff',
  btnname: '按钮',
}

由于我们的项目用tsx编写，需要增加支出ts的插件

npm install -D @storybook/preset-scss css-loader sass sass-loader style-loader

修改 .storybook/main.js

再次启动项目，能启动起来，表示正常

组件已经有了，准备打包

打包我这边使用rollup，后续会列一下它和webpack的区别。

安装rollup以及相关依赖

npm install -D rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-replace @rollup/plugin-image rollup-plugin-terser rollup-plugin-postcss postcss cssnano postcss-nested postcss-simple-vars

安装好rollup后还需要配置babel，也需要安装babel配置需要的相关插件依赖

npm install -D @babel/cli @babel/core @babel/plugin-external-helpers @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-react-jsx @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-typescript

安装cross-env等依赖

npm install -D cross-env rollup-plugin-typescript2 @rollup/plugin-json rollup-plugin-dts

//rollup.config.js

// Rollup plugins
// babel插件用于处理es6代码的转换，使转换出来的代码可以用于不支持es6的环境使用
import babel from 'rollup-plugin-babel'
// resolve将我们编写的源码与依赖的第三方库进行合并
import resolve from 'rollup-plugin-node-resolve'
// 解决rollup.js无法识别CommonJS模块
import commonjs from 'rollup-plugin-commonjs'
// 全局替换变量比如process.env
import replace from 'rollup-plugin-replace'
// 使rollup可以使用postCss处理样式文件scss、css等
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
// 可以处理组件中import图片的方式，将图片转换成base64格式，但会增加打包体积，适用于小图标
import image from '@rollup/plugin-image'
// 压缩打包代码（这里弃用因为该插件不能识别es的语法，所以采用terser替代）
// import { uglify } from 'rollup-plugin-uglify';
// 压缩打包代码
import { terser } from 'rollup-plugin-terser'
// PostCSS plugins 处理css定义的变量
import simplevars from 'postcss-simple-vars'
// 处理scss嵌套样式写法
import nested from 'postcss-nested'
// 替代cssnext
import postcssPresetEnv from 'postcss-preset-env'
// css代码压缩
import cssnano from 'cssnano'
// 支持typescript
import typescript from 'rollup-plugin-typescript2'
// 支持rollup.js导入json模块
import json from '@rollup/plugin-json'
// 用于打包生成*.d.ts文件
import dts from 'rollup-plugin-dts'
// 引入package
// import pkg from "./package.json";

const env = process.env.NODE_ENV
const PACKAGE_ROOT_PATH = process.cwd()

const config = [
  {
    // 入口文件我这里在components下统一导出所有自定义的组件
    input: `${PACKAGE_ROOT_PATH}/src/index.tsx`,
    // 输出文件夹，可以是个数组输出不同格式（umd,cjs,esm...）通过env是否是生产环境打包来决定文件命名是否是.min
    output: [
      {
        file: `${PACKAGE_ROOT_PATH}/dist/index.esm.js`,
        format: 'esm',
      },
      {
        file: `${PACKAGE_ROOT_PATH}/dist/index.js`,
        format: 'cjs',
      },
    ],
    // 注入全局变量比如jQuery的$这里只是尝试 并未启用
    // globals: {
    //   react: 'React',                                         // 这跟external 是配套使用的，指明global.React即是外部依赖react
    //   antd: 'antd'
    // },
    // 自定义警告事件，这里由于会报THIS_IS_UNDEFINED警告，这里手动过滤掉
    onwarn: function (warning) {
      if (warning.code === 'THIS_IS_UNDEFINED') {
        return
      }
    },
    // 将模块视为外部模块，不会打包在库中
    external: ['react', 'react-dom'],
    // 插件
    plugins: [
      typescript(),
      image(),
      postcss({
        plugins: [
          simplevars(),
          nested(),
          postcssPresetEnv(),
          autoprefixer(),
          cssnano(),
        ],
        // 处理.css和.scss文件
        extensions: ['.css', '.scss'],
      }),
      // 告诉 Rollup 如何查找外部模块并安装它
      resolve(),
      // babel处理不包含node_modules文件的所有js,ts,tsx
      babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true,
        plugins: ['@babel/plugin-external-helpers'],
        extensions: ['.js', '.ts', 'tsx'],
      }),
      // 将 CommonJS 转换成 ES2015 模块
      // 这里有些引入使用某个库的api但报未导出该api通过namedExports来手动导出
      commonjs({
        namedExports: {
          'node_modules/react-is/index.js': ['isFragment'],
          'node_modules/react/index.js': [
            'Fragment',
            'cloneElement',
            'isValidElement',
            'Children',
            'createContext',
            'Component',
            'useRef',
            'useImperativeHandle',
            'forwardRef',
            'useState',
            'useEffect',
            'useMemo',
          ],
          'node_modules/react-dom/index.js': [
            'render',
            'unmountComponentAtNode',
            'findDOMNode',
          ],
          'node_modules/gojs/release/go.js': [
            'Diagram',
            'GraphLinksModel',
            'Overview',
            'Spot',
          ],
        },
      }),
      json(),
      // 全局替换NODE_ENV，exclude表示不包含某些文件夹下的文件
      replace({
        // exclude: 'node_modules/**',
        'process.env.NODE_ENV': JSON.stringify(env || 'development'),
      }),
      // 生产环境执行terser压缩代码
      env === 'production' && terser(),
    ],
  },
  {
    // 打包*.d.ts配置，用于支持typescript项目
    input: `${PACKAGE_ROOT_PATH}/src/index.tsx`,
    output: [
      {
        file: `${PACKAGE_ROOT_PATH}/dist/index.d.ts`,
        format: 'esm',
      },
    ],
    external: [/\.scss$/, /\.css$/],
    plugins: [dts()],
  },
]

export default config

修改tsconfig.json

修改.gitignore，将package下打包目录忽略

node_modules

.DS_Store
lerna-debug.log
yarn-error.log

packages/*/dist
packages/*/lib

storybook-static

给每个包的package.json下增加scripts:

"scripts": {
    "build:sit": "cross-env BABEL_ENV=rollup rollup -c ../../rollup.config.js",
    "build": "cross-env NODE_ENV=production rollup -c ../../rollup.config.js"
  },