这篇文章是用来记录我在学习使用webpack打包代码生成npm包和js文件过程中碰到的问题的，从2021-12-11开始记录，整个过程分成4部分
一、使用webpack打包代码生成npm包和js文件
二、把npm包发布到npm包官网
三、在其它项目里引入发布的npm包，测试是否成功
四、修改npm包源代码
2021-12-13：
1、上午测试了上面提到的前3点，发现在其它项目里引入发布的npm包，测试失败
2、下午在1个新项目里建了一个单独的js文件，在这个js文件里导出一个类，在其它的js文件里，引入这个单独的js文件，实例化单独js文件里的类，在页面上显示出摄像头拍到的图像，这一步成功了
2021-12-23：
1、发布了一个npm包 vectorly，版本号到0.1.4，在其它项目里执行 yarn add vectorly，下载安装成功
2、npm包 vectorly里有两个文件里的内容要记录下，一个 package.json，一个 build\webpack.dist.prod.config.js
3、
{ "name": "vectorly", "version": "0.1.4", "description": "vectorly", "author": "yangguojiang <897951614@qq.com>", "main": "dist/vectorly.js", "files": [ "dist/*.js" ], "scripts": { "dist:prod": "webpack --config build/webpack.dist.prod.config.js", "dist:dev": "webpack --config build/webpack.dist.dev.config.js" }, "dependencies": { "@tensorflow-models/body-pix": "^2.2.0", "@tensorflow/tfjs": "^3.12.0", "@tensorflow/tfjs-backend-webgl": "^3.12.0", "@tensorflow/tfjs-tflite": "^0.0.1-alpha.8", "@types/emscripten": "^1.39.6", "typescript": "^4.4.4" }, "devDependencies": { "@babel/core": "^7.16.5", "babel-loader": "^8.2.3", "ts-loader": "8.2.0", "webpack": "^5.65.0", "webpack-cli": "^4.9.1" } }
4、
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, "../dist"),
filename: 'vectorly.js',
library: "vectorly",
libraryTarget: 'umd'
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '...'],
}
};
5、package.json里的 files 参数影响的是用 npm publish 命令上传哪些目录到npm官网，main 字段控制的是用户在自己的项目里安装 vectorly 包后，用户用webpack在本地测试和打包自己的项目会使用到的文件
6、webpack.dist.prod.config.js文件里的 module.rules.exclude 只会影响 webpack 打包速度，exclude 指定的目录里的代码还是会被打包，当包的源代码里用了ts文件，resolve.extensions 需要设置成 ['.ts', '...']
7、npm publish 发布npm包
8、git tag -a v0.1.4 -m 'v0.1.4' git push origin --tags git库打标签并推送到远程
2021-12-24记录：
1、webpack版本号：5.65.0，webpack-cli版本号：4.9.1
2、想要webpack打包出来的js文件同时支持浏览器端和npm install，需要修改 build\webpack.dist.prod.config.js
3、
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, "../dist"),
filename: 'vectorly.js',
library: {
name: 'vectorly',
type: 'umd',
export: 'default',
}
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '...'],
}
};
4、添加 export: 'default'，导出的js文件可以用script标签引入
5、在其它项目下引入webpack打包出来的js文件
6、
<script src="http://xxx.com/vectorly.js?v=1.0"></script> <script> var picupVideoBgSwapTest = new vectorly(token, background); <script>
参考文件：
1、https://blog.csdn.net/hupian1989/article/details/83445126
2、https://webpack.docschina.org/configuration/output/#outputlibrary
3、https://www.xlaoyu.info/2018/01/05/webpack-output-librarytarget/
4、https://github.com/Yuliang-Lee/webpack-libraryTarget-demo
5、https://www.codercto.com/a/70404.html