在浏览器中打包 TypeScript 系列 1：ES 模块和导入映射

在浏览器中打包 TypeScript 系列 1：ES 模块和导入映射

引言

在现代 Web 开发中，TypeScript 已成为构建交互式、可扩展 Web 应用程序的热门选择。然而，在浏览器中打包 TypeScript 代码可能会很麻烦，尤其是在处理模块依赖关系时。

ES 模块

ES 模块是 JavaScript 中的一种模块系统，允许我们将代码组织成可重用且可维护的块。它们使用 export 和 import 来定义和使用模块。

// my-module.ts
export const myFunction = () => {
  // ...
};

// main.ts
import { myFunction } from './my-module.ts';
myFunction();

导入映射

导入映射是一种机制，允许我们指定模块如何从一个位置映射到另一个位置。这对于管理模块依赖关系非常有用，尤其是在使用多个包时。

{
  "imports": {
    "my-module": "./my-module.ts"
  }
}

在上面的示例中，我们将 my-module 模块映射到 ./my-module.ts 文件。这将告诉浏览器从该文件加载 my-module 模块。

使用导入映射打包 TypeScript

我们可以使用导入映射来简化浏览器中 TypeScript 的打包过程。通过使用诸如 Rollup 或 Webpack 之类的打包工具，我们可以创建包含导入映射的包。

// rollup.config.js
export default {
  input: 'main.ts',
  output: {
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    typescript({
      tsconfig: './tsconfig.json',
      importHelpers: true
    })
  ]
};

// import-map.json
{
  "imports": {
    "my-module": "./my-module.ts"
  }
}

通过运行以下命令，我们可以生成包含导入映射的包：

rollup --config rollup.config.js --output.intro "import * as moduleMap from '/import-map.json';\nwindow.__importMap__ = moduleMap;"

生成的包将包含 import-map.json 文件，其中包含模块映射。浏览器将自动使用此导入映射来加载模块。

结论

ES 模块和导入映射提供了在浏览器中打包 TypeScript 的一种强大而灵活的方法。它们使我们能够管理模块依赖关系，并创建可重用且可维护的代码块。在随后的文章中，我们将探讨其他打包 TypeScript 的方法，并深入研究高级打包技术。