用webpack打包TS的npm工具库,手到擒来

689 阅读2分钟

本文基于你会使用基础的typescripttsconfig.json配置以及知道怎么发布npm包,教你怎么把两者结合起来。

tsc

首先,如果你的项目没有项目依赖(dependencies),你是没有必要使用webpackrollup一类的工具的,你可以直接使用原生的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"]
}

比较重要的是 declarationdeclarationMap 这两项要设置为 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