八、开发组件的流程

这是一个开发组组件的基本流程

1.标题处理组件的边界情况

\$root、\$parent | \$children、 $ref 、provide | inject

父组件给子组件传入属性

$attrs: 如果子组件中不想继承父组件中传入的非prop属性，可以使用inheritAttrs禁用继承然后通过v-bind="$attrs"把外部出啊如的非prop属性设置给希望的标签(除了class和style)

父组件给子组件传入事件

$listeners 将父组件的中出.native 的v-on事件传入到内部组件

2.快速原型开发

• VuelCLI提供一个一个插件可以进行原型的快速开发
• 需要先额外安装一个全局的扩展
  • yarn global add @vue/cli-service-global
• 通过vue serve直接运行组件，如果vue serve不指定参数默认会在当前目录找以下的入口文件
  • main.js、index.js、App.vue、app.vue
  • 也可以指定要加载的组件 vue serve ./src/login.vue

3.组件开发

组件分类

• 第三方组件，如element，对样式要求不高
• 基础组件，如表单、按钮等，对样式有自己的一套规范
• 业务组件，公司定制化的组件，可以在第三方组件基础上开发

4.Mnorepo

两种项目管理包的方式

• Multirepo(Multiple Respository) 每一个包对应一个项目
• Monorepo(Monolithic Repository) 一个项目仓库中管理多个模块/包
  vue3 ,react都是采用Mnorepo的方式管理项目

目录结构

5.storybook

Storybook

• 可视化的组件展示平台
• 在隔离的开发环境中，以交互的方式展示组件
• 独立开发组件

安装

sotrybook手动安装教程

6. yarn workspaces

如果不同组件中有相同的包就提取到跟目录安装包，否则就在组件中安装包

开启workspaces

• 项目根目录的package.json

"private": true,
"workspaces": [
	"packages/*"
]

7.Lerna

7.组件测试

安装测试依赖

yarn add jest @vue/test-utils vue-jest babel-jest -D -W

Jest 的配置

jest.config.js

module.exports = {
  "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
  "moduleFileExtensions": [
    "js",
    "json",
    // 告诉 Jest 处理 `*.vue` 文件
    "vue"
  ],
  "transform": {
    // 用 `vue-jest` 处理 `*.vue` 文件
    ".*\\.(vue)$": "vue-jest",
    // 用 `babel-jest` 处理 js
    ".*\\.(js)$": "babel-jest" 
  }
}

8.Rollup打包

Babel 的配置

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env'
    ]
  ]
}

Babel 的桥接

yarn add babel-core@bridge -D -W

安装 Rollup 以及所需的插件

yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W

Rollup 配置文件

在 button 目录中创建 rollup.config.js

import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true, 
        // Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]

配置 build 脚本并运行

找到 button 包中的 package.json 的 scripts 配置

"build": "rollup -c"

运行打包

yarn workspace lg-button run build

打包所有组件

安装依赖

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W

配置文件

项目根目录创建 rollup.config.js

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const isDev = process.env.NODE_ENV !== 'production'

// 公共插件配置
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true,
    // Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true
  })
]

// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每一个文件夹创建对应的配置
  .map(item => {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto',
          file: path.join(root, item, pkg.module),
          format: 'es'
        },
      ],
      plugins: plugins
    }
  })

在每一个包中设置 package.json 中的 main 和 module 字段

"main": "dist/cjs/index.js",
"module": "dist/es/index.js"

根目录的 package.json 中配置 scripts

"build": "rollup -c"

## 9.基于模板生成包的结构