webpack系列学习-使用eslint和发布npm包前言：笔者把学习的webpack知识从基础到原理写个系列，以便回顾

前言：笔者把学习的webpack知识从基础到原理写个系列，以便回顾。希望能帮助到更多正在学习webpack的小伙伴。

在webpack中使用eslint

和CI/CD系统集成

本地开发阶段增加precommit钩子

安装 husky

npm i husky -D

增加 npm script，通过lint-staged增量检查修改的文件

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

和webpack集成

使用eslint-loader,构建时检查js规范

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

使用eslint-loader

安装依赖包

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

在webpack中增加eslint-loader

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

module.exports = {
        "parse":"babel-eslint",
        "extends":"airbnb",
        "env":{
            "browser":true,
            "node":true
        }
        // 自定义规则
        //  rules:{

        //  }
    }

打包构建在命令后就可以看到eslint提示的代码错误

webpack打包组件和基础库

实现一个大整数加法库的打包

需要打包压缩版和非压缩版本
支持AMD/CJS/ESM模块引入

打包输出库的名称

未压缩版 large-number.js
压缩版 large-number.min.js

如何将库暴露出去

library: 指定库的全局变量
libraryTarget: 支持库引入的方式

开始

创建新项目文件夹large-number
创建新项目文件夹large-number
安装webpack

npm i webpack webpack-cli -D

安装terser-webpack-plugin

npm i terser-webpack-plugin -D

创建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$/,
                })
            ]
        }
    }

创建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;
    }

// 区分生产环境 和测试环境
    if (process.env.NODE_ENV === 'production') {
        module.exports = require('./dist/large-number.min.js');
    } else {
        module.exports = require('./dist/large-number.js');
    }

增加npm scripts

 "scripts": {
        "build": "webpack",
        "prepublish": "webpack"
    },

打包 npm run build
发布npm包
- npm login
- npm publish
在其他项目中使用large-count包
安装

 npm i large-count -S

使用

import largeCount from 'large-count';

  render(){
      const largeRes = largeCount('99','1')
      return (
          <div>
              { largeRes }
          </div>
      )
  }

打包 npm run build 即可正常看到结果

以上代码放到了github

可以下载调试。