工具类(公共方法)发布流程

打包工具选择：webpack、rollup

Webpack方式

1. 新建项目，npm init 初始化项目，配置相关项

2. 安装打包所需依赖

Webpack webpack-cli 以及压缩依赖 terser-webpack-plugin（也可以是其他的压缩工具）

{
  "name": "***",
  "version": "1.0.2",
  "description": "工具类",
  "main": "./dist/add.js", --->入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" -->打包命令
  },
  "repository": {
    "type": "git",
    "url": "git@192.*******.git" -->源码地址
  },
  "keywords": [
    "axios"
  ],
  "author": "***",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.75.0",                     --->所需的依赖
   "webpack-cli": "^5.0.1"
   "terser-webpack-plugin": "^5.3.6"
  }
}

3. 新建webpack.config.js配置文件

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    entry: {
        "add": './index.js',   //为了输出两个文件，我们指定两个出口
        "add.min": './index.js',
    },
    output: {
        filename: "[name].js",  //因为是多个文件，所以这样写
        library: "add",  //打包出去库的名字
        libraryTarget: "umd",   //定义的规范，打包库的目标选项，包含var 、 assign 、 this 、 window 、 global 、 commonjs 、 commonjs2 、 commonjsmodule 、 amd 、 umd 、 umd2 、 jsonp这么多 umd是最通用的规范 默认值是var
    },
    mode: "none", //因为自带的只能指定一种环境，所以我们直接关闭，利用插件实现
    optimization: { //这个字段很强大，我们做webpack的代码分割，摇数，tree shake等都会用到这个字段
        minimize: true, //开启插件
        minimizer: [new TerserPlugin({
            test: /\.min.js/  //提供一个正则，表示符合有min.js的就进行压缩
        })]
    }
}

4. 新建工具类文件，编写具体的公共方法

从上面的配置文件中，我们可以看到工具类的入口文件是index.js，我们这边就新建一个index.js文件在里面编写
所需的方法并输出

举个例子：

export default function add(a, b){
  return a + b;
}

5. 打包 npm run build

6. 发布 npm publish

发布注意的事项：

1.版本号要是没发布过的版本号，且是递增的版本号。

2.npm发布npm源地址得是原始源地址registry.npmjs.org

3.查询npm源地址：npm config get registry

4.设置npm源地址：npm config set registry=registry.npmjs.org

 

rollup方式

1. 新建项目，npm init 初始化项目，配置相关项

2. 安装打包所需依赖

{
  "name": "***", -->包名
  "private": false,
  "version": "1.0.8",
  "main": "dist/tools.js", -->入口文件
  "author": "***",
  "license": "MIT",
  "description": "工具类",
  "type": "module",
  "keywords": [
    "工具类"
  ],
  "scripts": {
    "test": "node example",
    "build": "rollup -c"   --> 打包命令
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "rollup": "^3.7.0",
    "rollup-plugin-babel": "^4.4.0"
  },
  "dependencies": {
    "@rollup/plugin-json": "^5.0.2",
    "moment": "^2.29.4",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-uglify": "^6.0.4"
  }
}

 

3. 新建配置文件rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';

import json from '@rollup/plugin-json'
const paths = {
    input: {
        root:  'src/index.js', ---> 入口文件
    },
    output: {
        root:  'dist/', ---> 打包文件夹
    },
};
const fileName = `tools.js`; --> 文件名称
export default {
    input: `${paths.input.root}`,
    output: {
        file: `${paths.output.root}${fileName}`,
        format: 'esm',
        name: 'tools',
    },
    plugins: [
        json(),
        resolve(),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
            runtimeHelpers: true,
        }),
        uglify(),
    ],
};

4. 新建工具类文件，编写具体的公共方法

从上面的配置文件中，我们可以看到工具类的入口文件是src/index.js，我们这边就在文件夹src下新建一个index.js文件在里面编写所需的方法并输出

举个例子：

import moment from "moment/moment";
const formatter =  (date, formatter)=> {
    if (date == undefined) { return  moment(new Date()).format("YYYY-MM-DD") };
    if(!formatter) {
      return moment(date).format("YYYY-MM-DD")
    } else {
      return  moment(date).format(formatter)
    }
}
export default {
  formatter
}

5. 打包 npm run build

6. 发布：npm publish 注意事项同上面webpack下事项

注意：rollup安装依赖时，会出现依赖包冲突的问题，导致后续的依赖包安装不上，这里的解决办法有两种：1种是可以降低rollup版本或其他依赖的版本；还有一种就是在安装时 加上 --legacy-peer-deps 目的是绕过peerDependency自动安装；它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。 或者加上--force强制安装（不推荐）