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 <[e-mail]>",
  "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