The target

The objectives of this paper are:

  1. Implement the project infrastructure
  2. Support multiple specification packaging
  3. Implement load on demand
  4. Release NPM package

Set up the project

  1. Initialize the project directory

    mkdir lyn-comp-lib && cd lyn-comp-lib && npm init -y
Copy the code

  2. New Packages directory

    Packages directories are component directories. A component folder is a unit, and a folder is a component

    mkdir packages
Copy the code

  3. New/SRC/index. Js

    / SRC /index.js as the packing entry for the CommonJS specification

    mkdir src && cd src && touch index.js
Copy the code

  4. The new webpack.com mon. Js

    Commonjs specification webPack configuration file

    touch webpack.common.js
Copy the code

  5. New webpack. Umd. Js

    Umd specification webPack configuration file

    touch webpack.umd.js
Copy the code

  6. The publish new. Sh

    Responsible for building projects and releasing NPM packages

    touch publish.sh
Copy the code

  7. Install webpack and WebPack-CLI

    npm i webpack webpack-cli -D
Copy the code

Project directory structure

Start coding

For now, we are only writing simple demos to validate the architectural design

component

Create two new directories in the Packages directory as component directories

This directory structure actually references the Element-UI component library in preparation for supporting on-demand loading

  1. /packages/hello/src/index.js
// hello function
export default function hello (msg) {
    console.log('hello ', msg)
}
Copy the code
  1. /packages/log/src/index.js
// log function
export default function log (str) {
    console.log('log: ', str)
}
Copy the code

Importing and exporting components

Uniformly import and export components from your project in/SRC /index.js

// This part is automatically generated when the component becomes large, as is the case with element-UI
import hello from '.. /packages/hello/src/index'
import log from '.. /packages/log/src/index'

export default {
    hello,
    log
}
Copy the code

Write a WebPack configuration file

  1. /webpack.common.js

    const path = require('path')

module.exports = {
    entry: './src/index.js'.// Use developer mode, for later debugging, in actual development can be changed to production
    mode: 'development'.output: {
        path: path.join(__dirname, './lib'),
        filename: 'lyn-comp-lib.common.js'./ / commonjs2 specification
        libraryTarget: 'commonjs2'.// Replace the window object in the bundle with this, otherwise the window is not defined
        globalObject: 'this'.// Without this configuration item, the component will be mounted to the default property, which requires comp.default. XXX, which is inconvenient
        libraryExport: 'default'}}Copy the code

  2. /webpack.umd.js

const path = require('path')

module.exports = {
    // This section can be generated automatically during actual development, using the element-UI method
    // Load on demand requires entry configuration in multi-entry mode, one entry per component
    entry: {
        log: './packages/log/src/index.js'.hello: './packages/hello/src/index.js'
    },
    mode: 'development'.output: {
        path: path.join(__dirname, './lib'),
        filename: '[name].js'./ / umd specification
        libraryTarget: 'umd'.globalObject: 'this'.// Global variables exposed by the component library can be used when, for example, bundles are introduced via script
        library: 'lyn-comp-lib'.libraryExport: 'default'}}Copy the code

package.json

{
    "name": "@liyongning/lyn-comp-lib"."version": "1.0.0"."description": "Build a component library from 0 to 1"."main": "lib/lyn-comp-lib.common.js"."scripts": {
        "build:commonjs2": "webpack --config webpack.common.js"."build:umd": "webpack --config webpack.umd.js"."build": "npm run build:commonjs2 && npm run build:umd"
    },
    "keywords": [Component library."0 to 1"]."author": "Li Yong Ning"."files": [
      "lib"."package.json"]."repository": {
      "type": "git"."url": "https://github.com/liyongning/lyn-comp-lib.git"},... }Copy the code

explain

  1. name

    Add your OWN NPM account name in front of the package name. By using the method of NPM Scope, the package directory is organized in a different way from ordinary packages and can effectively avoid conflicts with others’ package names

  2. main

    Tell the user (import hello from ‘@liyongning/lyn-comp-lib’) where to load the component library

  3. script

    Build commands

  4. files

    Publishing an NPM package tells the publisher to upload only the files and directories specified in files to the NPM server

  5. repository

    Code repository address, optional, can not, but generally will provide, and others to share

Build the publish script publish.sh

Shell script, responsible for building component libraries and publishing component libraries to NPM

#! /bin/bashEcho 'publish --access public' NPM publish --access publicCopy the code

README.md

A project’s must-have file, readme.md, is responsible for telling others, how to use our component library

Build, publish

At this point, of course, you’re almost done with what you set out to do in the beginning. Execute the script, build and publish the component library, and of course you should have your own NPM account before publishing

sh publish.sh
Copy the code

If no error is reported during script execution and the following information is displayed, the NPM package is successfully published. You can also visit the NPM official website to view the information

. NPM notice Total Files: 5 NPM notice + @liyongning/[email protected]Copy the code

test

Let’s create a new test project to actually use the component library we just released to verify that it works and meets our expectations

New project

  1. Initialize the project directory

    mkdir test && cd test && npm init -y && npm i webpack webpack-cli -D && npm i @liyongning/lyn-comp-lib -S
Copy the code

    Check the log or package.json to see that the component library has been installed successfully and is now ready to use

  2. New/SRC/index. Js

    import { hello } from '@liyongning/lyn-comp-lib'
console.log(hello('lyn comp lib'))
Copy the code

  3. build

    npx webpack-cli --mode development
Copy the code

    In /dist directory, we will generate the packaged file mian. Js, and then create a new index. HTML file in /dist directory and import main.js.

  1. Whether to load on demand

    / SRC /index.js: hello function: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js: / SRC /index.js The configuration is then loaded on demand according to the usage document (readme.md)

    /node_modules/@liyongning/lyn-comp-lib/lib/hello.js

  2. Load on demand according to the component library usage documentation configuration

    Install Babel – plugin – component

    Install babel-loader, @babel/core

    npm install --save-dev babel-loader @babel/core
Copy the code
    // webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js'.mode: 'development'.output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },
  module: {
    rules: [{test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'}}}]Copy the code

    Install @ Babel/preset – env

    {
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "@liyongning/lyn-comp-lib",
        "style": false
      }
    ]
  ]
}
Copy the code
6. Configure package.json script ' 'json {... scripts: { "build": "webpack --config webpack.config.js" } ... }Copy the code

  1. Executing build commands

    npm run build
Copy the code

  2. Repeat step 4 above and you will find that the packaged file only has hello function, no log function

    And the actual package size is also smaller

OK, target accomplished!! If you have any questions, welcome to ask and make progress together

github