Rapid prototyping

VueCLI provides a plug-in for rapid prototyping. You need to install a global extension first

npm install @vue/cli-service-global -g
Copy the code

When the component is developed, you can run Vue Serve to see how the component works

Incorporate third-party component libraries

In addition to developing custom components from scratch, you can also build on third-party components for secondary development.

For example, component library development with ElementUI requires installation and configuration. This is done using vue Add Element, which automatically installs Babel and its dependent plug-ins and generates the corresponding configuration in package.json.

Monorepo

Use Monorepo’s concept to make each component independent of the other, rather than downloading a complete package when only one of the components is needed. If you use Monorepo, your code should have a packages folder that holds the code for the components that have been split into logic. Each component is a separate module with its own package.json file

StoryBook

StoryBook is a visual platform for displaying components interactively in an isolated development environment. StoryBook runs outside of the main program, so users can develop components independently without worrying about application-specific dependencies. Once the components are developed in StoryBook, you can quickly find the corresponding components.

About the installation

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

Once installed, you can start storybook by running NPM Run StoryBook, which automatically generates storybook configuration files. Storybook /main.js and the instance code folder Stories, which set the path of each component (default is the path of the example code).

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 jest -D -W
Copy the code

Install dependencies for the specified workspace

yarn workspace kl-button add lodash@4
Copy the code

Install dependencies for all workspaces

yarn install
Copy the code

Lerna

After the component library is developed, it is necessary to submit it to Github or NPM. At this time, Lerna can be used to facilitate the unified release of all packages.

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.

About Unit Testing

After a component is developed, unit testing is also needed before it is released. The purpose of using unit testing is to find errors that may occur within the component. Unit testing of components is the use of unit testing tools to test various states and behaviors of components to ensure that the use of components in the project will not cause errors after the release of components.

Benefits of using unit tests:

  • Provide documentation that describes the behavior of the component
  • Saves time on manual testing
  • Reduce bugs when developing new features
  • To improve the design
  • Promote the refactoring

In particular, jEST does not support the ESM specification by default, so it is not recognized when using import, which can be handled using Babel

yarn add --dev babel-jest @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs -W
Copy the code

Then configure babel.config.js

module.exports = {
    presets: [["@babel/preset-env",
            {
                targets: {
                    node: "current"}}]],plugins: ["transform-es2015-modules-commonjs"]};Copy the code

You also need to add the following code to jest.config.js:

transformIgnorePatterns: ["
      
       /node_modules/(? ! (lodash-es|other-es-lib))"
      ]
Copy the code

After executing YARN Jest, ESM problems will not occur again

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

Package. json "build": "rollup -c"Copy the code

Run yarn Workspace KL-button run build to generate the packaged file under kL-button. This command means to use YARN to run the build command in a workspace named kl-button, the build command that was just added to package.json in the kl-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'

constisDev = process.env.NODE_ENV ! = ='production'

// Public plug-in configuration
const plugins = [
    vue({
        // Dynamically inject css as a <style> tag
        css: true.// Explicitly convert template to render function
        compileTemplate: true
    }),
    json(),
    nodeResolve(),
    postcss({
        // Insert CSS into style
        // inject: true,
        // Put CSS in the same directory as JS
        extract: true})]// If it is not a development environment, enable compression
isDev || plugins.push(terser())

// Packages folder path
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
    // Filter only folders
    .filter(item= > fs.statSync(path.resolve(root, item)).isDirectory())
    // Create a configuration for each folder
    .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
        }
    })
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.

Create components using templates

Because the structure of the components is stable, that is, the file structure in each component is basically the same, a template can be extracted and a new component can be quickly generated based on the template through PLOP if needed.

yarn add plop -W -D
Copy the code

Plopfile.js = plopfile.js = plopfile.js = plopfile.js = plopfile.js = plopfile.js

module.exports = plop= > {
    plop.setGenerator('component', {
        description: 'create a custom component'.prompts: [{type: 'input'.name: 'name'.message: 'component name'.default: 'MyComponent'}].actions: [{type: 'add'.path: 'packages/{{name}}/src/{{name}}.vue'.templateFile: 'plop-template/component/src/component.hbs'
            },
            {
                type: 'add'.path: 'packages/{{name}}/__tests__/{{name}}.test.js'.templateFile: 'plop-template/component/__tests__/component.test.hbs'
            },
            {
                type: 'add'.path: 'packages/{{name}}/stories/{{name}}.stories.js'.templateFile: 'plop-template/component/stories/component.stories.hbs'
            },
            {
                type: 'add'.path: 'packages/{{name}}/index.js'.templateFile: 'plop-template/component/index.hbs'
            },
            {
                type: 'add'.path: 'packages/{{name}}/LICENSE'.templateFile: 'plop-template/component/LICENSE'
            },
            {
                type: 'add'.path: 'packages/{{name}}/package.json'.templateFile: 'plop-template/component/package.hbs'
            },
            {
                type: 'add'.path: 'packages/{{name}}/README.md'.templateFile: 'plop-template/component/README.hbs'})}}]Copy the code

After running YARN plop, the logic to create the component automatically runs. Of course, you need to enter the component name. Source code express