本文基于你会使用基础的typescript
和tsconfig.json
配置以及知道怎么发布npm
包,教你怎么把两者结合起来。
tsc
首先,如果你的项目没有项目依赖(dependencies),你是没有必要使用webpack
、rollup
一类的工具的,你可以直接使用原生的tsc
进行打包。
tsconfig.json
{
"compilerOptions": {
/* Language and Environment */
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
/* Modules */
"module": "commonjs" /* Specify what module code is generated. */,
/* Emit */
"declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
"declarationMap": true /* Create sourcemaps for d.ts files. */,
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,
"skipLibCheck": true /* Skip type checking all .d.ts files. */
},
"include": ["src/*.ts"]
}
比较重要的是 declaration
和 declarationMap
这两项要设置为 true
,不然打包出来没有.d.ts
声明文件就坏了。
然后修改package.json
,添加两个script。
"scripts": {
"build": "tsc",
"dev": "tsc --watch"
}
然后运行 npm run build
就能打包到 dist
文件夹,运行 npm run watch
就能热启动开发了。
它不会打包你的 dependencies
,也就是说,如果其它人安装了你的包,就必须也安装你的 dependencies
,如果你只是使用了你的 dependencies
的一小部分功能,那别人就不得不为了这一点点功能多下一个包,这就是一个比较大的浪费了。
所以你可以用打包工具(例如webpack)只把你用到的这一小部分功能也打包进去,就不用麻烦用户再多下一个包了
webpack
安装
npm install -D webpack webpack-cli rimraf
其中 rimraf
用来删除文件(通常你会有这个需求);
配置文件
module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "index.js", // 需要跟你在src文件夹中导出文件的文件名一致
globalObject: "this",
libraryTarget: "umd", //支持库的引入方式
},
};
script
{
...
"scripts": {
"build": "rimraf dist && webpack --mode production",
"dev": "webpack --watch --mode development"
}
}
然后运行 npm run build
就能打包到 dist
文件夹,运行 npm run watch
就能热启动开发了。
接下来你把dist
文件夹发布出去就好了。
你也可以到github具体参考我的一个项目的配置,once-init