Webpack series learning – Using ESLint and publishing NPM packages

Preface: the author study webpack knowledge from the foundation to the principle to write a series, in order to review. Hope to help more friends who are learning Webpack.

Webpack series learning – First experience

Webpack series learning – Basic Usage one

Webpack series learning – various loaders to use

Webpack series learning – hot update and compression

Use ESLint in WebPack

Integration with CI/CD systems

Added preCOMMIT hooks to the local development phase

• Install the husky

npm i husky -D
Copy the code

• Add NPM scripts to incrementally check modified files by lint-staged

"scripts": {"precommit":"lint-staged"
  },
  "lint-staged": {"linters:{ "*.{js,css}": ["eslint --fix","git add"]}}Copy the code

And webpack integration

• With eslint-Loader, check the JS specification at build time

// webpack.config.js
    module.exports = {
        module: {rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    use:[
                        "babel-loader"."eslint-loader"}]}}Copy the code

Use eslint – loader

• Installing dependency packages

npm i eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-loader babel-eslint eslint-config-airbnb -D
Copy the code

• Add eslint-Loader to Webpack

// webpack.config.js
    module.exports = {
        module: {rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    use:[
                        "babel-loader"."eslint-loader"}]}}Copy the code

• Create.eslintrc.js in the root directory

module.exports = {
        "parse":"babel-eslint"."extends":"airbnb"."env": {"browser":true."node":true
        }
        // Custom rules
        // rules:{

        / /}
    }
Copy the code

• Packaging builds after the command you can see esLint prompt code errors

Webpack packages components and base libraries

Implement a large integer plus library package

• You need to package the compressed and uncompressed versions
• Support AMD/CJS/ESM module introduction

The name of the packaged output library

• Uncompressed version of large-number.js
• Compress large – number. Min. Js

How do I expose the library

• Library: Specifies a global variable for the library
• LibraryTarget: A way to support library introduction

start

• Create a new project folder large-number
• Create a new project folder large-number
• Install webpack

npm i webpack webpack-cli -D
Copy the code

• Install terser webpack — the plugin

npm i terser-webpack-plugin -D
Copy the code

• Create a webpack. Config. Js

const TerserPlugin = require('terser-webpack-plugin');

    module.exports = {
        entry: {"large-number":"./src/index.js"."large-number.min":"./src/index.js",},output: {filename:'[name].js'.library: 'largeNumber'.libraryTarget:"umd".libraryExport:'default'
        },
        mode: 'none'.optimization: {
            minimize: true.minimizer: [
                new TerserPlugin({
                    include: /\.min\.js$/,})]}}Copy the code

• Create a SRC/index. Js

export default function add(a, b) {
        let i = a.length - 1;
        let j = b.length - 1;

        let carry = 0;
        let ret = ' ';
        while (i >= 0 || j >= 0) {
            let x = 0;
            let y = 0;
            let sum;

            if (i >= 0) {
                x = a[i] - '0';
                i --;
            }

            if (j >= 0) {
                y = b[j] - '0';
                j --;
            }

            sum = x + y + carry;

            if (sum >= 10) {
                carry = 1;
                sum -= 10;
            } else {
                carry = 0;
            }
            / / 0 + ' '
            ret = sum + ret;
        }

        if (carry) {
            ret = carry + ret;
        }

        return ret;
    }
Copy the code

• Create index.js in the root directory

// Distinguish between production and test environments
    if (process.env.NODE_ENV === 'production') {
        module.exports = require('./dist/large-number.min.js');
    } else {
        module.exports = require('./dist/large-number.js');
    }
Copy the code

• Increase the NPM scripts

 "scripts": {
        "build": "webpack",
        "prepublish": "webpack"
    },
Copy the code

• Package the NPM run build

• Release NPM package

  • npm login
  • npm publish

• Use large-count packages in other projects

• The installation

 npm i large-count -S
Copy the code

• use

import largeCount from 'large-count';

  render(){
      const largeRes = largeCount('99'.'1')
      return (
          <div>
              { largeRes }
          </div>)}Copy the code

• Package the NPM Run build and see the results as normal

The above code is posted on Github

Debug can be downloaded.