webpack系列学习-使用eslint和发布npm包
字节爱好者 362 5

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

webpack系列学习-初体验

webpack系列学习-基本用法一

webpack系列学习-各种loader使用

webpack系列学习-热更新和压缩

在webpack中使用eslint

和CI/CD系统集成

webpack系列学习-使用eslint和发布npm包

本地开发阶段增加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"
                      ]
                  }
              ]
          }
      }
  • 在根目录创建.eslintrc.js

    module.exports = {
          "parse":"babel-eslint",
          "extends":"airbnb",
          "env":{
              "browser":true,
              "node":true
          }
          // 自定义规则
          //  rules:{
    
          //  }
      }
  • 打包构建在命令后就可以看到eslint提示的代码错误 webpack系列学习-使用eslint和发布npm包

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;
      }
  • 在根目录创建index.js

    // 区分生产环境 和测试环境
      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

可以下载调试。

评论区

索引目录