打包 TypeScript 应用的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一个由微软开发的强类型语言，它扩展了 JavaScript 中的语法，使得代码更加安全、可读和易于维护。和 JavaScript 一样，TypeScript 也需要被编译成 JavaScript 才能在浏览器中运行。本篇文章将介绍 TypeScript 应用的打包最佳实践，帮助你更好地打包 TypeScript 应用。

安装相关的工具

TypeScript：可以通过 npm 安装 TypeScript，命令为 npm install -g typescript。
Webpack：可以通过 npm 安装 Webpack，命令为 npm install -g webpack。
Webpack CLI：可以通过 npm 安装 Webpack CLI，命令为 npm install -g webpack-cli。
ts-loader：可以通过 npm 安装 ts-loader，命令为 npm install -D ts-loader。

配置 TypeScript

在打包 TypeScript 应用前，我们需要进行一些 TypeScript 的配置。

tsconfig.json

创建一个名为 tsconfig.json 的文件，并添加以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "checkJs": true,
    "outDir": "./dist",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

在上述配置中，我们指定了 TypeScript 代码的编译选项，指定了输出目录、生成 source map、开启严格模式等。

package.json

在 package.json 文件中，添加以下配置：

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "ts-loader": "^8.2.0",
    "typescript": "^4.2.2",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  }
}

在以上配置中，我们添加了一个名为 build 的 script，在执行 npm run build 命令时，会自动调用 webpack 进行打包。

配置 Webpack

Webpack 是一个打包工具，可以将多个 JavaScript / TypeScript 文件打包成一个或多个文件。我们可以通过配置 Webpack 来打包 TypeScript 应用。

webpack.config.js

在项目根目录下创建一个名为 webpack.config.js 的文件，添加以下配置：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在上述配置中，我们指定了入口文件为 ./src/index.ts，指定了 ts-loader 作为解析 TypeScript 文件的 loader，指定了输出文件的文件名和目录。

示例代码

以下是一个 TypeScript 应用的示例代码：

class Greeter {
  constructor(public greeting: string) {}
  public greet() {
    return `Hello, ${this.greeting}!`;
  }
}

const greeter = new Greeter('world');
console.log(greeter.greet());

以上代码定义了一个 Greeter 类，该类包含了一个构造函数和一个 greet 方法。在主函数中，我们创建了一个 Greeter 对象并输出了 greet 方法的返回值。

打包 TypeScript 应用

现在，我们可以开始打包 TypeScript 应用了。首先，运行以下命令编译 TypeScript 代码：

tsc

运行以上命令后，会在 dist 目录下生成编译后的 JavaScript 代码。接下来，执行以下命令打包应用：

npm run build

以上命令会自动调用 webpack 进行打包，打包后的文件会放在 dist 目录下。我们可以通过以下命令在浏览器中运行应用：

npx http-server dist

以上命令会在浏览器中打开我们的应用。

总结

在本文中，我们介绍了打包 TypeScript 应用的最佳实践，包括 TypeScript 的配置和 Webpack 的配置。通过本文的指导，你可以更好地打包 TypeScript 应用，并进行更好的开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b30fd4add4f0e0ffc2117a