用TypeScript开发手势库 - (2)tsconfig.json & rollup.config.js & npx

1. tsconfig.json

tsconfig.json是TypeScript项目的配置文件。它允许您配置TypeScript编译器如何将TypeScript代码编译成JavaScript。在手势库项目中，我们使用tsconfig.json来配置以下内容：

• 目标 ：指定要生成的JavaScript代码的目标版本。我们使用“ES2015”作为目标，因为它与大多数现代浏览器兼容。
• 模块 ：指定要生成的JavaScript代码的模块系统。我们使用“ESModules”作为模块系统，因为它允许我们使用import和export语句来导入和导出模块。
• 输出目录 ：指定要将生成的JavaScript代码输出到哪个目录。我们使用“dist”目录作为输出目录。

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESModules",
    "outDir": "dist"
  }
}

2. rollup.config.js

rollup.config.js是Rollup打包工具的配置文件。它允许您配置Rollup如何将多个JavaScript模块打包成一个或多个捆绑文件。在手势库项目中，我们使用rollup.config.js来配置以下内容：

• 输入 ：指定要打包的JavaScript模块的入口文件。我们使用“src/index.ts”作为入口文件。
• 输出 ：指定要生成的捆绑文件的格式和输出目录。我们使用“umd”格式和“dist”目录作为输出格式和输出目录。
• 插件 ：指定要使用的Rollup插件。我们使用“rollup-plugin-typescript”和“rollup-plugin-commonjs”插件来将TypeScript代码编译成JavaScript代码并将CommonJS模块转换为ES模块。

import typescript from "rollup-plugin-typescript";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: "src/index.ts",
  output: {
    format: "umd",
    file: "dist/index.js"
  },
  plugins: [
    typescript(),
    commonjs()
  ]
};

3. npx

npx是npm包执行器。它允许您在命令行中运行npm包，而无需将其安装到您的系统中。在手势库项目中，我们使用npx来运行TypeScript编译器和Rollup打包工具。

npx tsc
npx rollup -c

4. 为什么不用Webpack

Webpack是一个非常流行的JavaScript打包工具。但是，它并不适合在TypeScript项目中使用。因为Webpack在处理TypeScript代码时存在以下几个问题：

• Webpack无法直接处理TypeScript代码。 您需要使用TypeScript编译器将TypeScript代码编译成JavaScript代码，然后才能使用Webpack打包JavaScript代码。这增加了项目的复杂性和构建时间。
• Webpack无法有效地处理tree shaking。 Tree shaking是一种优化技术，它可以从JavaScript代码中删除未使用的代码。Webpack无法有效地处理tree shaking，这可能会导致生成的文件体积较大。
• Webpack的配置过于复杂。 Webpack的配置非常复杂，这可能会让您感到困惑和沮丧。

因此，我们不建议在TypeScript项目中使用Webpack。

5. 总结

在本文中，我们介绍了在TypeScript中开发手势库时如何使用tsconfig.json、rollup.config.js和npx。我们还讨论了为什么不使用Webpack。如果您正在开发一个TypeScript项目，那么我们建议您使用tsconfig.json、rollup.config.js和npx来构建您的项目。