通过webpack创建并打包js库到npm仓库

1.创建项目并进行基本配置

webpack配置文件： webpack.build.js

const path = require('path'); module.exports = { mode:'development', entry:'./src/webpack-numbers.js', output: { filename: 'webpack-numbers.js', path: path.resolve(__dirname, 'dist'), clean: true, }, };

package.json:

script:{ "buildJs": "webpack --config ./webpack.build.js", "dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development", } 2.暴露库：需要通过 output.library 配置项暴露从入口导出的内容

注意：如果是暴露为ES Module时，不用同时设置name属性，build时会报错

// 暴露库 library: { // library.type设置为module时不能设置同时设置name type: 'module', }, }, 3.使用库

可以通过 script 标签使用，不演示

4.运行在 ES6、CommonJS、AMD、Node.js 等环境中

以上都只能通过script 标签使用，但是希望它能够兼容不同的环境

解决：更新 output.library 配置项，将其 type 设置为 'umd'：

output: { path: path.resolve(__dirname, 'dist'), filename: 'webpack-numbers.js', library: { name: 'webpackNumbers', type: 'umd', }, },

我这里是将其导出为ES Module：

注意：

暴露为ES Module时，不能同时设置name属性;

且需要在output同级设置experiments.outputModule为true

mode:'development', entry:'./src/webpack-numbers.js', output: { filename: 'webpack-numbers.js', path: path.resolve(__dirname, 'dist'), clean: true, // 暴露库 library: { // library.type设置为module时不能设置同时设置name type: 'module', }, }, // 设置 type: 'module'时，必须加入以下配置 experiments: { outputModule: true, },

 

5.library的type字段详解

library 可接受的数据类型是 string | string[] | object。string 是 object 类型的简写形式，当值为 object 类型时，object 中能包含的属性有 name、type、export、auxiliaryComment 和 umdNamedDefine。本文将重点放在 type 字段上，它决定如何公开当前库，取值基本固定，name 字段可以是任何字符串，它用来指定库的名称。

 library.type = var(默认值)，{type: 'var', name: 'MyLibrary'}：通过MyLibrary能访问到add函数，但不能保证MyLibrary在全局变量上 library.type = window ，{type: 'window', name: 'MyLibrary'}：通过window.MyLibrary能访问到add函数。library.type = module，将 library 的值改成 {type: 'module'}, 此时还要 experiments.outputModule 设置为 true。此时不存在闭包，并且能用 es modules 将库导入。library.type = this，将 library 的值改成 {type: 'this', name: 'MyLibrary'}，通过 this.MyLibrary 能访问到 add 函数；将 library 的值改成 {type: 'self', name: 'MyLibrary'}，此时通过 self.MyLibrary 可访问到 add 函数，在浏览器环境的全局上下文中 self 等于 window；将 library 的值改成 {type: 'global', name: 'MyLibrary'}，此时 MyLibrary 会被分配到全局对象，全局对象会根据target值的不同而不同，全部对象可能的值是 self、global 或 globalThis。当 target 的值为 web（默认值），此时的打包结果与 library.type = self 结果一样。library.type = commonjs，将 library 的值改成 {type: 'commonjs', name: 'MyLibrary'}, 将 library 的值改成 {type: 'commonjs2', name: 'MyLibrary'}，CommonJs 规范只定义了 exports ，但是 module.exports 被 node.js 和一些其他实现 CommonJs 规范的模块系统所使用，commonjs 表示纯 CommonJs，commonjs2 在 CommonJs 的基础上增加了 module.exports。  

webpack output.library的16 种取值方法示例_output.library.type-CSDN博客

7.使用命令npm run buildJs打包时报错 [webpack-cli] Error: Library name must be unset. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.

[webpack-cli] Error: Library name must be unset. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.   

解决：library.type设置为module时不能设置同时设置name

// 暴露库 library: { // library.type设置为module时不能设置同时设置name //name:'tools', type: 'module', }, 6.外部化 lodash

如果工具包中将lodash也打包进去包体积会很大，所以可以通过设置externals属性将lodash包进行隔离不打包，但是这要求使用工具包的项目环境下安装了lodash这个被隔离的包。

externals: { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, }, 7.问题：导出为ES6报错： 

ERROR in external {"commonjs":"lodash","commonjs2":"lodash","amd":"lodash","root":"_"} Cannot read properties of undefined (reading 'length') TypeError: Cannot read properties of undefined (reading 'length')

解决：配置ES6的外置依赖库 module: 'lodash'

// 依赖工具库外置：要求引用的项目本身有这个工具库 externals: { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', // 配置ES module module: 'lodash', root: '_', }, 8.问题二：webpack 外部化lodash后报错，reduce()方法找不到

 将lodash外部化后，工具类中的引入lodash就不能再使用了，否则就会报错。注释掉引用即可用

// 注意外部化的时候，这里引入就不能直接引入了 // import _ from 'lodash'; import numRef from './data/ref.json'; export function numToWord(num) { return _.reduce( numRef, (accum, ref) => { return ref.num === num ? ref.word : accum; }, '' ); } export function wordToNum(word) { return _.reduce( numRef, (accum, ref) => { return ref.word === word && word.toLowerCase() ? ref.num : accum; }, -1 ); } 9.外部化的限制

对于想要实现从一个依赖中调用多个文件的那些库，无法通过在 externals 中指定整个 library 的方式将它们从 bundle 中排除，而是需要逐个或者使用正则表达式排除它们。

module.exports = { //... externals: [ 'library/one', 'library/two', // 匹配以 "library/" 开始的所有依赖 /^library\/.+$/, ], }; 10.优化生产环境下的输出结果

为了优化生产环境下的输出结果。那么，我们还需要将生成 bundle 的文件路径，添加到 package.json 中的 main 字段中。

{ ... "main": "dist/webpack-numbers.js", ... }

或者，按照这个 指南 将其添加为标准模块

{ ... "module": "src/webpack-numbers.js", ... }

另外，为了暴露和库关联的样式表，你应该使用 MiniCssExtractPlugin。然后，用户可以像使用其他样式表一样使用和加载这些样式表。

11.发布到npm仓库

可以 将其发布为一个 npm 包，并且在 unpkg  找到它，并分发给你的用户。

进入打包好后的文件夹dist，然后npm init 创建package.json文件，并且设置基本信息

{ "name": "webpack-numbers-lmf", "version": "1.0.4", "description": "修改", "main": "webpack-numbers.js", "private": false, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "limingfang", "license": "ISC" }

npm login登录npm仓库

命令行输入用户名和密码后npm publish发布版本即可

12.使用： npm i webpack-numbers-lmf lodash -S import { numToWord,wordToNum } from "webpack-numbers-lmf" console.log(numToWord(3), wordToNum("Ten") ); 13.完整配置代码

webpack.build.js:

//webpack.build.js const path = require('path'); module.exports = { mode:'development', entry:'./src/webpack-numbers.js', output: { filename: 'webpack-numbers.js', path: path.resolve(__dirname, 'dist'), clean: true, // 暴露库 library: { // library.type设置为module时不能设置同时设置name type: 'module', }, }, // 设置 type: 'module'时，必须加入以下配置 experiments: { outputModule: true, }, // 依赖工具库外置：要求引用的项目本身有这个工具库 externals: { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', // 配置ES module module: 'lodash', root: '_', }, }, }; //package.json { "name": "webpack-demo", "version": "1.0.0", "description": "", "private": false, "main": "dist/webpack-numbers.js", "module": "src/webpack-numbers.js", "scripts": { "buildJs": "webpack --config ./webpack.build.js", "dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development", "prod": "set NODE_ENV=production && webpack serve --open --config ./webpack.prod.js --mode=production" }, ... } //webpack-numbers.js // 注意外部化的时候，这里引入就不能直接引入了 // import _ from 'lodash'; import numRef from './data/ref.json'; export function numToWord(num) { return _.reduce( numRef, (accum, ref) => { return ref.num === num ? ref.word : accum; }, '' ); } export function wordToNum(word) { return _.reduce( numRef, (accum, ref) => { return ref.word === word && word.toLowerCase() ? ref.num : accum; }, -1 ); }

dist里的package.json

{ "name": "webpack-numbers-lmf", "version": "1.0.4", "description": "修改", "main": "webpack-numbers.js", "private": false, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "xxx", "license": "ISC" }

 使用：

//index.js import _ from 'lodash'; import { numToWord,wordToNum } from "webpack-numbers-lmf" function component() { console.log(numToWord(3), wordToNum("Ten") ); return element; } document.body.appendChild(component());