preface

Front knowledge

Rapid prototyping

  • VueCli provides a plug-in for rapid prototyping (running a component on its own)
  • An additional global extension needs to be installed first:npm install -g @vue/cli-service-global
  • usevue serveQuickly view components in action

Vue serve If no parameter is specified, the following entry files will be found in the current directory by default: main.js, index.js, app.vue, app.vue

  • You can specify which components to load

vue serve ./src/login.vue

Multirepo(Multiple Repository)

Each package corresponds to a project

Monorepo strategy

Monorepo is a software development strategy that stores code for multiple projects in a repository. (Manage multiple modules/packages in a project repository)

Since there are many articles about both strategies, here is a brief introduction to the advantages, but not the disadvantages

Advantage:

  • Flexibility: Each REPO has the flexibility to choose development tools, environment configurations, and so on

  • Security: natural permission control, release online no impact on other projects

storybook

  • Visual component display platform
  • Interactive presentation of components in an isolated development environment
  • Independent development component
  • Supported frameworks: ⬇️

React, React Native, Vue, Angular, Ember, HTML, Svelte, Mithril, Riot

Storybook installation

npx -p @storybook/cli sb init --type vue
npm i vue
npm i vue-loader vue-template-compiler --dev
Copy the code

Storybook configuration

Configure the matching path in main.js in the.sotrybook file

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  "../packages/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/vue"
}
Copy the code

usestorybookBuild the component library document

Portal official document

Use the YARN workspace

Set the following code in the package.json file in the project root directory to start the workspace.

"private": true."workspaces": [
	"./packages/*"
]
Copy the code

Next, install the development dependencies to the workspace root

yarn add lodash@4 -D -W
Copy the code

Install dependencies for the specified workspace

yarn workspace j-button add lodash@3
Copy the code

Install dependencies for all workspaces

yarn install
Copy the code

Lerna

Lerna is a tool optimized for workflow management of multi-package code repositories using Git and NPM. Official website pass door. For managing JavaScript projects with multiple packages, it can submit code to Git and NPM repositories with one click.

Project initialization

First use NPM to install Lerna into the global environment:

Lerna 2.x is recommended.

npm install --global lerna
Copy the code

Next, we’ll create a new Git repository:

git init lerna-repo && cd lerna-repo
Copy the code

Now we convert the above warehouse into a Lerna warehouse:

lerna init && npm i
Copy the code

Your repository should currently have the following structure:

lerna-repo/
  packages/
  package.json
  lerna.json
Copy the code

Also add Babel plugin (degrade code, improve compatibility)

npm i babel-core@bridge -D
Copy the code

Commonly used instructions

  • Lerna init => Initialize

  • Lerna bootstrap => Execute the boot process (bootstrap) in the current LERNA repository. Install all dependencies and link any cross-dependencies.

  • Lerna import => Import packages/ from the local path and commit commit.

  • Lerna publish => Import packages/ from the local path and commit commit.

  • Lerna Changed => Checks which packages have been changed since the last release.

  • Lerna diff => Lists all or a package’s changes since the last release.

  • Lerna run [script] => Run this NPM script in every package that contains the [script] script.

  • Lerna ls => Lists all public packages in the lerNA repository.

  • Lerna add => Installation dependency: Lerna add dependency file installation address

  • Lerna link => Link cross-referenced libraries

About the package

It is easier to package component libraries or frameworks Rollup than WebPack. Because Webpack has to configure tree-shaking itself, even if it does, the result package is much more bloated than Rollup, which supports tree-shaking by default.

Install dependencies:

Yarn add rollup rollup-plugin-terser [email protected] vue- template-compiler-d-wCopy the code

Config file 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()
        ]
    }
]
Copy the code

Then add scripts to package.json

Note that package.json is not in the root directory, but in each component’s own package.json

"build": "rollup -c"
Copy the code

Running YARN Workspace J-button run Build will generate the packaged file under j-Button. This command means to use YARN to run the build command in a workspace named J-button, which is the build command that was just added in package.json in the j-Button folder.

However, packaging a component separately is too tedious. Some plug-ins of YARN can be used to package all components together.

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

@rollup/plugin-json enables rollup to load JSON files as modules, and @rollup/plugin-node-resolve enables rollup to package dependent third-party packages. Then create the rollup configuration file rollup.config.js file in the project root directory

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' // Public plugin configuration const plugins = [vue({// Dynamically inject CSS as a <style> tag CSS: true, // Explicitly convert template to render function compileTemplate: }), json(), nodeResolve(), postcss({// Insert CSS into style // inject: true, // insert CSS into the same directory as js extract: True})] // If it is not the development environment, Open the compressed isDev | | plugins. Push (terser ()) / / packages folder path const root = path. Resolve (__dirname, 'packages') module.exports = fs.readdirsync (root) Filter (item => fs.statsync (path.resolve(root, Map (item => {const PKG = require(path.resolve(root, item)).isdirectory ()) // Create a configuration for each folder. '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 } })Copy the code

Then configure the script in the package.json file in the root directory

"build": "rollup -c"
Copy the code

Then configure it in package.json for each component:

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

Main is where components are packaged and used, while Module is where dependent third-party packages are stored. After the configuration is complete, run the YARN build command in the root directory to automatically package all components under packages.

On clean up

Node_modules can be deleted using lerna clean, and dist folder can be cleared using a third-party library, rimraf:

yarn add rimraf -D -W
Copy the code

Then configure each component’s package.json with a command:

"del": "rimraf dist"
Copy the code

After that, run yarn Workspaces run del for all packages to delete the dist directory, but it is not advisable to create the same file every time you create a new component.

Lerna release

When a component library is developed and submitted to Github or NPM, Lerna can be used to make it easy to publish all packages in one place.

Lerna is a workflow tool that optimizes the use of Git and NPM to manage indiana Jones repositories. For managing JavaScript projects with multiple packages, Lerna can submit code to Git and NPM repositories with one click.

After Lerna is installed globally, Lerna init is used to initialize Lerna configuration. Git folders are created automatically if the current project is not managed using Git, or if the project does not have packages folders in its root directory.

For publishing, using the yarn lerna command automatically publishes all components in the Packages folder to NPM. Note that the component name may be the same as the existing package name, and the corresponding message will be displayed. Just change the component name. Note That the source of YARN and NPM must be set to the original source, not the source of Taobao. Otherwise, an error will be reported.