通用npm包（组件库）打包构建

一、背景

现在的前端开发，绕不开使用一些第三方的NPM包。同时，很多公司不论大小都有了自己的NPM仓库，然后发布一些只有自己使用的私有NPM包。我们在发包的时候，包的代码怎么构建才能体积最小，同时做到新能最好就成了一个非常重要的问题。

在一些发包实现中，无论是UI包还是纯粹的TypeScript Utils包，你当然都可以不打包而直接将代码放到npm包的dist目录中，然后以来业务工程进行构建。但是这显然是有问题的，因为这些NPM包都是比较稳定的代码，不像业务代码那样需要进行频繁的修改和调试了，直接暴露源码给业务使用，会使这些包在不同的项目中多次重复构建，无疑会拉长业务开发时热更新和生产构建时间。

二、如何解决

就像背景中提到的，一般我们的NPM包可以分为两类，分别是：

  • 纯TypeScript（javascript）类型，只包含逻辑代码
  • UI类，包含VUE相关代码的组件，根据vue的2和3的版本不同，又可以细分分别适用于vue2和vue3的两个小类

在分为以上以上两类的同时，还有一种情况需要考虑下，就是有些C端的产品，可能会进行服务端渲染优化。因此我们需要考虑到这些包可能会在Node环境中运行，甚至一些utils包就是直接运行在Node环境中的。所以这个时候我们就需要一份已与CommonJS规范的导出。另外，我们有些工具包还要考虑是否开源出去的情况，如果考虑开源的话可能还需要一份基于UMD规范的导出。

所以，根据以上情况，我们需要多份打包脚本配置。

使用TSC打包Typescript为ESModule、CommonJS及UMD格式

package.json

{
  // 下列内容只包含了打包构建用到的配置，其他字段用到的请自行补充
  "main": "dist/main/index.js",
  "typings": "dist/types/index.d.ts",
  "module": "dist/module/index.js",
  "unpkg": "dist/umd/index.js",
  "exports": {
    ".": {
      "types": "./dist/main/index.d.ts",
      "import": "./dist/module/index.js",
      "require": "./dist/main/index.js",
      "browser": "./dist/umd/index.js"
    }
  },
  "scripts": {
    "prepublish": "pnpm build",
    "build": "run-p build:*",
    "build:main": "tsc -p ./pack/tsconfig.json",
    "build:module": "tsc -p ./pack/tsconfig.module.json",
    "build:umd": "tsc -p ./pack/tsconfig.umd.json",
    "watch:module": "tsc -p ./pack/tsconfig.module.json -w",
    "watch:main": "tsc -p ./pack/tsconfig.json -w"
  },
  "files": [
    "dist",
    "src"
  ],
  "devDependencies": {
    "@types/node":"^18.13.0",
    "typescript": "^4.9.5",
    "npm-run-all": "^4.1.5"
  }
}

1.基本配置&生成基于CommonJS规范的导出

pack/tsconfig.json

{
    "compilerOptions": {
      "target": "ES6", // 编译目标版本
      "outDir": "../dist/main",  // 输出目录
      "rootDir": "../src", // 根目录
      "moduleResolution": "nodenext", // 如何处理模块
      "module": "commonjs", // 生成的模块系统代码
      "declaration": true, // 生成相应的 .d.ts文件
      "declarationDir":"../dist/types", // 生成相应的 .d.ts文件的存放目录
      "inlineSourceMap": true, // 生成单个的sourcemaps文件
      "esModuleInterop": true, // https://www.typescriptlang.org/tsconfig#esModuleInterop
      "resolveJsonModule": true, // 允许导入json文件
      "strict": false,  // 不使用严格模式
      "noUnusedLocals": true, // 若有未使用的局部变量则抛错
      "noUnusedParameters": true,  // 若有未使用的参数则抛错
      "noImplicitReturns": true, // 不是函数的所有返回路径都有返回值时报错
      "noFallthroughCasesInSwitch": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）
      "traceResolution": false, // 不生成模块解析日志信息
      "listEmittedFiles": false, // 不打印出编译后生成文件的名字。
      "listFiles": false, // 编译过程中不打印文件名。
      "pretty": true, // 给错误和消息设置样式，使用颜色和上下文
      "lib": ["dom"], // 编译过程中需要引入的库文件的列表
      "types": ["node"], // 要包含的类型声明文件名列表
      "typeRoots": ["node_modules/@types", "src/types"], // 要包含的类型声明文件路径列表
    },
    "include": ["../src/**/*.ts"],
    "exclude": ["**/node_modules/**"],
    "compileOnSave": true
  }

2.生成基于ESModule的导出文件

pack/tsconfig.module.json

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "target": "ES2015",
    "outDir": "../dist/module",
    "module": "ES2015",
    "moduleResolution": "nodenext",
    "resolveJsonModule": false, // 允许导入json文件
  },
}

3.生成基于UMD的导出文件

pack/tsconfig.umd.json

{
    "extends": "./tsconfig",
    "compilerOptions": {
      "target": "es5",
      "outDir": "../dist/umd",
      "module": "UMD",
      "moduleResolution": "nodenext",
      "resolveJsonModule": false, // 允许导入json文件
      "lib": ["es5", "dom"], // 编译过程中需要引入的库文件的列表
    }
  }

基于Webpack打包通用UI库（Base Vue2）

工程目录结构

package.json

{
  "name": "private pkg",
  "version": "0.0.1-beta.0",
  "main": "dist/main/index.js",
  "typings": "dist/types/index.d.ts",
  "module": "dist/module/index.js",
  "unpkg": "dist/umd/index.js",
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "import": "./dist/module/index.js",
      "require": "./dist/main/index.js",
      "browser": "./dist/umd/index.js"
    }
  },
  "scripts": {
    "build": "run-p build:*",
    "build:esm": "webpack --config pack/webpack.esmodule.conf.js",
    "build:common": "webpack --config pack/webpack.common.conf.js",
    "build:types": "vue-tsc --skipLibCheck --declaration --emitDeclarationOnly --declarationDir dist/types"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "filter": "^0.1.1",
    "unplugin-vue-components": "^0.24.0",
    "vue-template-compiler": "2.7.14",
    "vue-loader": "^15.10.0",
    "vue":"^2.7.0",
    "vue-tsc": "^1.2.0",
    "npm-run-all": "^4.1.5",
	"webpack-node-externals": "^3.0.0",
	"progress-bar-webpack-plugin": "^2.1.0",
	"esbuild-loader": "^4.0.0",
	"webpack-merge": "^5.0.0",
	"css-loader": "^6.8.1",
	"postcss-loader": "^7.3.3",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "nodenext",
    "strict": false,
    "sourceMap": true,
    "importHelpers": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxFactory": "VueTsxSupport",
    "allowJs": true,
    "declaration": true,
    "declarationDir": "./dist/types",
    "skipLibCheck": true,
    "types": [
      "webpack-env",
      "vue"
    ]
  },
  "include": [
    "shims-vue.d.ts",
    "./index.ts"
  ],
  "exclude": [
    "node_modules/**/*"
  ],
  "vueCompilerOptions": {
    "target": 3
  }
}

webpack.base.conf.js

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

const webpackConf = {
    mode: 'production',
    entry: {
        app: ['./index.ts']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false
                    }
                }
            },
            {
                test: /\.(j|t)sx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'esbuild-loader',
                    options: {
                        loader: 'tsx',
                        target: 'esnext' // Syntax to compile to (see options below for possible values)
                    }
                }
            }
        ]
    },
    optimization: {
        minimize: true
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.ts', '.tsx', '.scss'],
        modules: ['node_modules'],
        alias: {
            '@': './src'
        }
    },
    stats: 'normal',
    plugins: [
        new VueLoaderPlugin(),
        new ProgressBarPlugin({
            complete: 'O',
            incomplete: '='
        })
    ]
};
module.exports = webpackConf;

webpack.common.conf.js

const baseWebpackConf = require('./webpack.base.conf.js');
const {merge} = require('webpack-merge');
const nodeExternals = require('webpack-node-externals');
const path = require('path');

const webpackConf = {
    output: {
        path: path.resolve(process.cwd(), './dist/main'),
        filename: `index.js`,
        chunkFilename: '[id].js',
        library: {
            type: 'commonjs2'
        }
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    externals: [nodeExternals()]
};
module.exports = merge(baseWebpackConf, webpackConf);

webpack.esmodule.conf.js

const baseWebpackConf = require('./webpack.base.conf.js');
const {merge} = require('webpack-merge');
const path = require('path');

const webpackConf = {
    output: {
        path: path.resolve(process.cwd(), './dist/module'),
        filename: `index.js`,
        chunkFilename: '[id].js',
        library: {
            type: 'module'
        }
    },
    experiments: {
        outputModule: true
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    externals: [
        {
            vue: 'vue',
            'vue-property-decorator': 'vue-property-decorator',
		  	//这里很重要，冗余的其他库都需要在这里配置external掉
        }
    ]
};
module.exports = merge(baseWebpackConf, webpackConf);

webpack.umd.conf.js

const baseWebpackConf = require('./webpack.base.conf.js');
const {merge} = require('webpack-merge');

const webpackConf = {
    output: {
        path: path.resolve(process.cwd(), './dist/module'),
        filename: `${pkgName}.umd.js`,
        chunkFilename: '[id].js',
        library: {
            name: `${pkgName}`,
            type: 'umd',
            export: 'default'
        }
    },
    externals: [
        {
            vue: 'vue'
        }
    ]
};
module.exports = merge(baseWebpackConf, webpackConf);

基于Webpack打包通用UI库（Base Vue3）

工程目录结构同上

package.json

{
  "name": "",
  "version": "0.0.1",
  "main": "dist/main/index.js",
  "typings": "dist/types/index.d.ts",
  "module": "dist/module/index.js",
  "unpkg": "dist/umd/index.js",
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "import": "./dist/module/index.js",
      "require": "./dist/main/index.js",
      "browser": "./dist/umd/index.js"
    }
  },
  "scripts": {
    "build": "run-p build:*",
    "build:esm": "webpack --config pack/webpack.esmodule.conf.js",
    "build:common": "webpack --config pack/webpack.common.conf.js",
    "build:types": "vue-tsc --skipLibCheck --declaration --emitDeclarationOnly --declarationDir dist/types"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.47",
    "filter": "^0.1.1",
    "unplugin-vue-components": "^0.24.0",
    "vue": "^3.2.47",
    "vue-loader": "^17.0.0",
    "vue-tsc": "^1.2.0",
	"npm-run-all": "^4.1.5",
	"webpack-node-externals": "^3.0.0",
	"progress-bar-webpack-plugin": "^2.1.0",
	"esbuild-loader": "^4.0.0",
	"webpack-merge": "^5.0.0",
	"css-loader": "^6.8.1",
	"postcss-loader": "^7.3.3",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "nodenext",
    "strict": false,
    "sourceMap": true,
    "importHelpers": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxFactory": "VueTsxSupport",
    "allowJs": true,
    "declaration": true,
    "declarationDir": "./dist/types",
    "skipLibCheck": true,
    // "baseUrl": ".",
    // "outDir": "./dist/types",
    "types": [
      "webpack-env",
      "vue"
    ]
  },
  "include": [
    "shims-vue.d.ts",
    "./index.ts"
  ],
  "exclude": [
    "node_modules/**/*"
  ],
  "vueCompilerOptions": {
    "target": 3
  }
}

webpack.base.conf.js

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

const webpackConf = {
    mode: 'production',
    entry: {
        app: ['./index.ts']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false
                    }
                }
            },
            {
                test: /\.(j|t)sx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'esbuild-loader',
                    options: {
                        loader: 'tsx',
                        target: 'esnext' // Syntax to compile to (see options below for possible values)
                    }
                }
            }
        ]
    },
    optimization: {
        minimize: false
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.ts', '.tsx', '.scss'],
        modules: ['node_modules'],
        alias: {
            '@': './src'
        }
    },
    stats: 'normal',
    plugins: [
        new VueLoaderPlugin(),
        new ProgressBarPlugin({
            complete: 'O',
            incomplete: '='
        })
    ]
};
module.exports = webpackConf;

webpack.common.conf.js

const baseWebpackConf = require('./webpack.base.conf.js');
const {merge} = require('webpack-merge');
const nodeExternals = require('webpack-node-externals');
const path = require('path');

const webpackConf = {
    output: {
        path: path.resolve(process.cwd(), './dist/main'),
        filename: `index.js`,
        chunkFilename: '[id].js',
        library: {
            type: 'commonjs2'
        }
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    externals: [nodeExternals()]
};
module.exports = merge(baseWebpackConf, webpackConf);

webpack.module.conf.js

const baseWebpackConf = require('./webpack.base.conf.js');
const {merge} = require('webpack-merge');
const path = require('path');

const webpackConf = {
    output: {
        path: path.resolve(process.cwd(), './dist/module'),
        filename: `index.js`,
        chunkFilename: '[id].js',
        library: {
            type: 'module'
        }
    },
    experiments: {
        outputModule: true
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    externals: [
        {
            vue: 'vue' 
		  // 这里很重要，冗余的其他库都需要在这里配置external掉
        }
    ]
};
module.exports = merge(baseWebpackConf, webpackConf);

webpack.umd.conf.js

const baseWebpackConf = require('./webpack.base.conf.js');
const {merge} = require('webpack-merge');

const webpackConf = {
  output:{
    path: path.resolve(process.cwd(), './dist/module'),
    filename: `${pkgName}.umd.js`,
    chunkFilename: '[id].js',
    library:{
      name:`${pkgName}`,
      type:'umd',
      export: 'default',
    }
  },
  externals:[{
    vue: 'vue'
  }]
}
module.exports = merge(baseWebpackConf,webpackConf)

文章看到这里了，如果你觉得对你的打包工作有启发的话，请点个赞吧

#webpack##架构开发##npm##组件库#
全部评论

相关推荐

头像
213456789
07-01 10:15
京东_零售_后端研发(准入职员工)
2024届实习+秋招（面试疲惫的时候就懒得记录了）
猿辅导1、自我介绍2、项目介绍3、项目实现了哪些功能？一人一单：超卖：关注点赞、排行榜为什么不用list，list也是先来先排如果只是单纯的来记录排序，两者都可以，但是我们实际需要显示的是前几名，而sorted set支持范围查询，我们项目中是需要显示排名前五的用户，list不能够支持快速的范围查询，而sorted set支持。zset是怎么实现查找、排序的。时间复杂度zset底层是跳表实现的。跳表分为多个level。查找时从最高的层开始查找，若此时的节点权重小于待查找的权重，就继续同一层向后查询。如果找到权重相同的，比较sds类型数据大小，或继续往低层遍历。排序是根据权重排序的。时间复杂度一...
查看17道真题和解析 我的失利项目复盘
点赞 评论 收藏
分享
头像
探厂的牛可乐
07-02 12:22
牛客_企业种草官
这会该做点啥呢
7月了，现在大家的状态总结起来就是：诶，算了，直接搞个投票吧，看看大家的状况和精神状态到底如何 我建议大家别焦虑，反正啥事都能过去，该咋准备还是得咋准备，牛牛先给大家分享一下今年的情况：大规模的秋招还是要至少8月以后才开始呢，少部分公司开始了，所以不用焦虑，这个时候还是要提升自身能力，不管你要去暑期实习还是没去暑期实习，除了基础的八股，项目能力都是非常重要的，因为八股谁都能背，拼到后面可能就是项目经历了。最近竞赛也比较多，大家也可以参加一下的，因为真的是解决行业实际问题的，有机会接触到顶尖技术和实际业务，前几天刚给大家推荐了汽车行业的，今天给大家推荐一...
点赞 评论 收藏
分享
头像
番茄酱谢谢
06-19 20:08
已编辑
门头沟学院 前端工程师
点赞 评论 收藏
分享
头像
Knight01
06-28 16:00
北京石油化工学院 Java
点赞 评论 收藏
分享
点赞 收藏 评论
分享

招聘动态

查看更多

博士生职位汇总

25届高薪提前批开启

全站热榜

正在热议
# 软件开发笔面经 #
83362次浏览 1798人参与
# 我的实习求职记录 #
3670980次浏览 59138人参与
# 极具前瞻性，现代汽车编程题 #
30566次浏览 524人参与
# 投递实习岗位前的准备 #
817752次浏览 14053人参与
# 打杂的实习你会去吗？ #
6927次浏览 65人参与
# 设计人的面试记录 #
34189次浏览 588人参与
# 你的秋招进行到哪一步了 #
477167次浏览 7417人参与
# 想实习转正，又想准备秋招，我该怎么办 #
214104次浏览 2313人参与
# 实习，投递多份简历没人回复怎么办 #
1446673次浏览 23338人参与
# 应届生初入职场，求建议 #
47896次浏览 1178人参与
# 你觉得机械有必要实习吗 #
21606次浏览 263人参与
# 想辞职但是不敢的原因 #
4686次浏览 71人参与
# 华为开奖那些事 #
1193256次浏览 9616人参与
# 25届如何提前做秋招准备？ #
47570次浏览 1053人参与
# 23届的你们都什么时候入职？ #
106600次浏览 873人参与
# 正在实习的你，在做dirty work吗 #
45636次浏览 340人参与
# 大疆求职进展汇总 #
44302次浏览 381人参与
# 互联网没坑了，还能去哪里？ #
551163次浏览 7674人参与
# 找工作中的意难平 #
259379次浏览 3862人参与
# 安利/避雷我的专业 #
15928次浏览 126人参与
# 你怎么评价今年的春招？ #
39724次浏览 737人参与
牛客网
牛客企业服务