webpack打包代码生成npm包和js文件学习记录

这篇文章是用来记录我在学习使用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