Once we develop a library, how do we package it and make it available to others? If you don’t know, keep reading!!

Initialize the library

mkdir library
cd library
npm init -y
Copy the code

After the above steps, a Library folder is generated that contains a package.json file. Then simply change it to the following:

{
  "name": "library"."version": "1.0.0"."description": ""."main": "./dist/library.js"."scripts": {
    "build": "webpack"
  },
  "keywords": []."author": "rocky"."license": "MIT"
}
Copy the code

Simply create a few files

Create a new SRC folder in the root directory and create math.js and String.js. Relevant documents are as follows:

// math.js
export function add(a,b){
    return a+b;
}

export function minus(a,b){
    return a-b;
}

export function multiply(a,b){
    return a*b;
}

export function division(a,b){
    return a/b;
}
Copy the code
// string.js
export function join(a,b){
    return a+""+b;
}
Copy the code

Go ahead and create a new index.js

import * as math from "./math";
import * as string from "./string";

export default {math,string}
Copy the code

Simple installation of webPack dependencies

npm install webpack webpack-cli --save
Copy the code

At the same time of installation, you can create the webpack configuration file webpack.config.js as follows:

const path = require("path");

module.exports={
    mode:"production",
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"library.js",
        library:"library"// Add a library variable to the global variable libraryTarget:"umd"}}Copy the code

After the installation is successful, run the package command

npm run build
Copy the code

A dist folder containing a library.js is then generated in the root directory.

How do you use it?

If someone wants to use the packaged library.js, there are several possible ways:

// es6 import library from"library"// commonjs const library=require("library"// AMD mode require(["library"].function(){}) // The script tag introduces <script SRC ="library.js"></script>
Copy the code

Create an index. HTML file in the dist folder and package the generated library.js file with script before importing it. Open the index.html browser, type Library in the console, and you get something like this:

Webpack website

Introduce other library usage

Suppose you need to import LoDash. Install LoDash

npm install lodash --save
Copy the code

Modify the string.js created earlier

import _ from "lodash";

export function join(a,b){
    // return a+""+b;
    return _.join([a,b],"");
}
Copy the code

When we run the package command, we see that the size of the packaged library has increased because of the introduction of LoDash. What to do? Modify the WebPack configuration file. Add an externals configuration item:

const path =require("path");

module.exports={
    mode:"production",
    entry:"./src/index.js",
    externals:["lodash"Output :{path:path.resolve(__dirname,"dist"),
        filename:"library.js",
        library:"library",
        libraryTarget:"umd"}}Copy the code

And then you pack it up and you see that the size of the library has shrunk again.

The above is a simple packaging process, after the packaging is completed, you can use the NPM related commands to publish the library to the NPM repository, after the release of success, you can let other partners use. Of course, in the real world, packaging a library requires a lot of work, such as tree-shaking, optimization, which I’m learning!

The resources

  • webpack output libraryTarget
  • webpack external