需求
后端有个nodejs 基础库，用typescript编写，需要发包到代码仓库上，被其它业务引入。这其中就涉及了： 编译， 打包，发包。
工作流速览
前提依赖
webpack主体
npm install --save-dev webpack webpack-cli
webpack插件
npm install --save-dev webpack-node-externals ts-loader
编译相关
npm instsall --save-dev typescript
基础示例
这个是工作流，可以看到从最初的源文件，一直到发包的打包文件的转换过程。这其中涉及到3个配置文件
- package.json 用于包依赖管理(装依赖 和 发包)
- webpackage.config.js 用于触发编译(typescript编译) 和 打包(把编译后的文件 打到一个文件里
- tsconfig.json 用于编译使用，将typescript文件编译成JavaScript文件。
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"declaration": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"emitDecoratorMetadata": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"lib": ["es2015", "es2016", "es2017.object", "es2020.Promise", "esnext.asynciterable", "dom"],
"module": "nodeNext",
"moduleResolution": "nodeNext",
"noImplicitAny": false,
"outDir": "./dist",
"composite": true,
"sourceMap": true,
"strict": true,
"strictPropertyInitialization": false,
"target": "es2017",
"types": ["jest"],
// "types": ["node"],
"typeRoots": ["node_modules/@types"],
},
"compileOnSave": true,
"include": ["src/**/*", "index.ts"],
"exclude": ["node_modules/**/*", "**/*.d.ts", "test"],
}
webpack.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/index.ts', // 指定入口文件为 src 目录下的 index.ts
target: 'node', // 指定打包目标为Node环境
externals: [nodeExternals()], // 排除 node_modules 中的模块
devtool: 'source-map',
module: {
rules: [
{
test: /\\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
preferRelative: true,
},
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出目录设置为根目录下的 dist 文件夹
libraryTarget: "commonjs"
},
};
- target: 指定运行时环境，这里是在后端node环境运行，填写node。
- exclude: 排除 node_module等不需要打包的文件。
- debug: source map, 关联打包文件和源文件，以开启 vscode等IDE debug时的断点。
- 编译：会用tsconfig.json文件进行编译
编译后打包
npx webpack
执行webpack的过程，会先触发编译下，然后打包
解释结果
编制结果在 dist文件夹里，可以查看里面内容如下，ls ./dist
bundle.js ：就是webpack打包的结果。
bundle.js.map ：用于debug的文件，source map参数开始后，关联bundle.js和源码的文件。
index.d.ts ：声明文件，typescript 编译index.ts时，产生的声明文件，src 里包含了其它*.ts的声明文件。
发包
package.json
最后，如果要发包注意下 package.json， main的入口是打包的文件生成的地方，
{
"name": "nodejs-webpack-demo",
"version": "1.0.0",
"description": "",
"main": "./dist/bundle.js",
"types": "./dist/index.d.ts",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.5.1",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"mongoose": "^8.4.4"
}
}
同时注意下，webpack.config.js里面的output中的libraryTarget，需要根据不同的运行环境，输出为指定格式，否则无法引入使用。
发包命令，用npm发包，进入到包的目录下
// 如果需要使用私有仓库
npm config set registry <https://your-registry.com>
// 登录
npm login
// 发包
npm publish
或是用 yarn ，注意这个需要在 包的外层执行 ，假设你的包文件是common，则需要在路径…/common， 即包文件的外层执行
yarn publish --registry=http://127.0.0.1:8081/repository/my-npm-repo/ --new-version 1.0.0 common
代码参考
代码地址 ：https://github.com/Wunan777/webpack-demo
