webpack4打包发布库

webpack除了可以打包应用，还可以打包js库，并且发布到NPM上。

打包完成需要支持ES6 module，CJS，AMD，script的引入方式。

1、打包库的配置

打包库和打包应用差别不是很大，都需要设置entry, output，只不过打包库需要对output额外设置一些参数，比如：library(指定库的全局变量), libraryTarget(支持库引入的方式), libraryExport: "default"

2、安装

  npm init -y
  npm install webpack webpack-cli -D

安装完成之后创建配置文件webpack.config.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; // 代表a的个位数的值
      let y = 0; // 代表b的个位数的值
      let sum;   // 代表求和的值

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

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

      sum = x + y + carry;

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

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

    return ret;
  };

安装一个插件： npm install terser-webpack-plugin -D，需要用这个插件去压缩js文件。

库编写好了，我们来编写配置,在webpack.config.js

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

  module.exports = {
    mode: "none",
    entry: {
      'catsaid-number': './src/index.js',
      'catsaid-number.min': './src/index.js'
    },
    output: {
      filename: '[name].js',
      library: 'catsaidNumber',
      libraryTarget: 'umd', // 设置成这个就可以通过上面的各种方式引入了
      libraryExport: 'default' // 不设置这个调用就比较麻烦了，引用库的话需要catsaid.default这样调用
    },
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({  // 压缩插件，设置匹配.min.js的文件，会识别ES6语法，如果设置mode= production 默认开启。
          include: /\.min\.js$/,
        })
      ]
    }
  }

设置打包，在package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

运行： npm run build

3、设置入口文件

设置package.json的main字段为index.js,在根目录新建一个index.js

编写逻辑

  if (process.env.NODE_ENV  == 'production') {
    module.exports = require('./dist/catsaid-number.min.js');
  } else {
    module.exports = require('./dist/catsaid-number.js');
  }

4、设置简介和钩子

在package.json

  "description": "测试打包",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "prepublish": "webpack"
  },

5、发布

发布需要有一个npm的账号，没有可以去npm官网注册：https://www.npmjs.com/

然后打开命令行工具，输入npm login

  npm login

  // 出现以下东西，会逐个出现，挨个输入就好了
  Username:  // 你的用户名
  Password: // 你的密码，是密文的
  Email: (this IS public)  // 你的邮箱，回车，成功就出现下面的了
  Logged in as username on https://registry.npmjs.org/.

然后发布：npm publish

如果打包报错

  code E403
  npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/webpack2 - You do not have permission to publish "webpack2". Are you logged in as the correct user?

说明你没有权限，就是说npm上已经有你的项目同样的名字了，需要修改一下在package.json里面的name字段的值

  "name": "catsaid-add-test",

出现+ catsaid-add-test@1.0.0 就代表打包成功了，打包前你可以创建并完善一下README.md

5.1 发布scoped包

发布作用域包需要修改package.json文件的name字段为：@你的用户名/包名,例如我的"name": "@nn-catsaid/origo-tip",, 需要注意的是npm publish默认发布私有包，想发布私有作用域包只能是付费用户才可以，想免费发带命名空间的包需要发公有，使用命令npm publish --access public，其他方面都一样。

5.2 查询用户名

如果你忘记了你注册账号时候的用户名是什么，可以使用：npm whoami 来查询

6、使用

安装：npm install catsaid-add-test -S

使用：

  import add from 'catsaid-add-test'
  console.log(add('999', '1'));

猫说