From 14a00d1ed8d509e908b19d7c04b9b577ac53e9b2 Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Sun, 24 Mar 2024 19:55:45 +0800 Subject: [PATCH 1/2] translation choosing compiler --- .../guides/Choosing Compiler Options.md | 133 ++++++++---------- 1 file changed, 62 insertions(+), 71 deletions(-) diff --git a/docs/documentation/zh/modules-reference/guides/Choosing Compiler Options.md b/docs/documentation/zh/modules-reference/guides/Choosing Compiler Options.md index 731e09a..8458697 100644 --- a/docs/documentation/zh/modules-reference/guides/Choosing Compiler Options.md +++ b/docs/documentation/zh/modules-reference/guides/Choosing Compiler Options.md @@ -1,115 +1,108 @@ --- -title: Modules - Choosing Compiler Options -short: Choosing Compiler Options +title: 模块——选择编译器选项 +short: 选择编译器选项 layout: docs permalink: /zh/docs/handbook/modules/guides/choosing-compiler-options.html -oneline: How to choose compiler options that reflect your module environment +oneline: 如何选择反映模块环境的编译器选项 translatable: true --- -## I’m writing an app +## 我正在编写应用程序 -A single tsconfig.json can only represent a single environment, both in terms of what globals are available and in terms of how modules behave. If your app contains server code, DOM code, web worker code, test code, and code to be shared by all of those, each of those should have its own tsconfig.json, connected with [project references](https://www.typescriptlang.org/docs/handbook/project-references.html#handbook-content). Then, use this guide once for each tsconfig.json. For library-like projects within an app, especially ones that need to run in multiple runtime environments, use the “[I’m writing a library](#im-writing-a-library)” section. +单个 tsconfig.json 文件只能代表一个环境，无论是在可用的全局变量还是模块行为方面。如果你的应用程序包含服务器代码、DOM 代码、Web Worker 代码、测试代码以及所有这些代码共享的代码，每个代码部分都应该有自己的 tsconfig.json，并通过[项目引用](/zh/docs/handbook/project-references.html#handbook-content)进行连接。然后，对于每个 tsconfig.json，都请参考本指南。对于应用程序的库及类似的项目，特别是那些需要在多个运行时环境中运行的项目，请参考“[我正在编写一个库](#我正在撰写一个库)”部分。 -### I’m using a bundler +### 我正在使用打包工具 -In addition to adopting the following settings, it’s also recommended _not_ to set `{ "type": "module" }` or use `.mts` files in bundler projects for now. [Some bundlers](https://andrewbranch.github.io/interop-test/#synthesizing-default-exports-for-cjs-modules) adopt different ESM/CJS interop behavior under these circumstances, which TypeScript cannot currently analyze with `"moduleResolution": "bundler"`. See [issue #54102](https://github.com/microsoft/TypeScript/issues/54102) for more information. +除了采用以下设置外，目前建议*不要*设置 `{ "type": "module" }` 或在打包工具项目中使用 `.mts` 文件。[一些打包工具](https://andrewbranch.github.io/interop-test/#synthesizing-default-exports-for-cjs-modules)在这些情况下采用了不同的 ESM/CJS 互操作行为，TypeScript 目前无法使用 `"moduleResolution": "bundler"` 分析这些情况。有关更多信息，请参阅[问题 #54102](https://github.com/microsoft/TypeScript/issues/54102)。 ```json5 { "compilerOptions": { - // This is not a complete template; it only - // shows relevant module-related settings. - // Be sure to set other important options - // like `target`, `lib`, and `strict`. + // 这不是一个完整的模板；它只展示了相关的模块相关设置。 + // 请确保设置其他重要的选项，如 `target`、`lib` 和 `strict`。 - // Required + // 必填项 "module": "esnext", "moduleResolution": "bundler", "esModuleInterop": true, - // Consult your bundler’s documentation + // 请参考你的打包工具的文档 "customConditions": ["module"], - // Recommended - "noEmit": true, // or `emitDeclarationOnly` + // 推荐项 + "noEmit": true, // 或 `emitDeclarationOnly` "allowImportingTsExtensions": true, "allowArbitraryExtensions": true, - "verbatimModuleSyntax": true, // or `isolatedModules` + "verbatimModuleSyntax": true, // 或 `isolatedModules` } } ``` -### I’m compiling and running the outputs in Node.js +### 我正在编译并在 Node.js 中运行输出结果 -Remember to set `"type": "module"` or use `.mts` files if you intend to emit ES modules. +请记得设置 `"type": "module"` 或者使用 `.mts` 文件，如果你打算生成 ES 模块。 ```json5 { "compilerOptions": { - // This is not a complete template; it only - // shows relevant module-related settings. - // Be sure to set other important options - // like `target`, `lib`, and `strict`. + // 这不是一个完整的模板；它只展示了相关的模块配置。 + // 请确保设置其他重要选项，如 `target`、`lib` 和 `strict`。 - // Required + // 必需的 "module": "nodenext", - // Implied by `"module": "nodenext"`: + // `"module": "nodenext"` 隐含了以下设置： // "moduleResolution": "nodenext", // "esModuleInterop": true, // "target": "esnext", - // Recommended + // 推荐的设置 "verbatimModuleSyntax": true, } } ``` -### I’m using ts-node +### 我正在使用 ts-node -ts-node attempts to be compatible with the same code and the same tsconfig.json settings that can be used to [compile and run the JS outputs in Node.js](#im-compiling-and-running-the-outputs-in-node). Refer to [ts-node documentation](https://typestrong.org/ts-node/) for more details. +ts-node 试图与可以用于[在 Node.js 中编译和运行 JS 输出](#im-compiling-and-running-the-outputs-in-node)的相同的代码和相同的 tsconfig.json 设置兼容。请参考 [ts-node 文档](https://typestrong.org/ts-node/)了解更多细节。 -### I’m using tsx +### 我正在使用 tsx -Whereas ts-node makes minimal modifications to Node.js’s module system by default, [tsx](https://github.com/esbuild-kit/tsx) behaves more like a bundler, allowing extensionless/index module specifiers and arbitrary mixing of ESM and CJS. Use the same settings for tsx as you [would for a bundler](#im-using-a-bundler). +与 ts-node 默认情况下最小化修改 Node.js 的模块系统不同，[tsx](https://github.com/esbuild-kit/tsx) 的行为更像一个打包工具，允许无扩展名/index 模块规范，并且允许任意混合使用 ESM 和 CJS。对于 tsx，请使用与 [bundler 相同的设置](#我正在使用打包工具)。 -### I’m writing ES modules for the browser, with no bundler or module compiler +### 我正在为浏览器编写 ES 模块，没有使用打包工具或模块编译器 -TypeScript does not currently have options dedicated to this scenario, but you can approximate them by using a combination of the `nodenext` ESM module resolution algorithm and `paths` as a substitute for URL and import map support. +目前，TypeScript 没有专门针对这种情况的选项，但是你可以通过使用 `nodenext` 的 ESM 模块解析算法和 `paths` 来近似实现，作为 URL 和导入映射支持的替代方案。 ```json5 // tsconfig.json { "compilerOptions": { - // This is not a complete template; it only - // shows relevant module-related settings. - // Be sure to set other important options - // like `target`, `lib`, and `strict`. + // 这不是一个完整的模板；它仅展示与模块相关的设置。 + // 请确保设置其他重要选项，如`target`、`lib`和`strict`。 - // Combined with `"type": "module"` in a local package.json, - // this enforces including file extensions on relative path imports. + // 结合本地 package.json 中的 `"type": "module"`， + // 这将强制在相对路径导入上包含文件扩展名。 "module": "nodenext", "paths": { - // Point TS to local types for remote URLs: + // 将 TS 指向远程 URL 的本地类型声明： "https://esm.sh/lodash@4.17.21": ["./node_modules/@types/lodash/index.d.ts"], - // Optional: point bare specifier imports to an empty file - // to prohibit importing from node_modules specifiers not listed here: + // 可选：将裸标识符导入指向空文件，以防止从未在此处列出的 node_modules 导入： "*": ["./empty-file.ts"] } } } ``` -This setup allows explicitly listed HTTPS imports to use locally-installed type declaration files, while erroring on imports that would normally resolve in node_modules: +这个设置允许明确列出的 HTTPS 导入使用本地安装的类型声明文件，同时在导入通常在 node_modules 中解析的情况下报错： ```ts import {} from "lodash"; // ^^^^^^^^ -// File '/project/empty-file.ts' is not a module. ts(2306) +// 文件 '/project/empty-file.ts' 不是一个模块。ts(2306) ``` -Alternatively, you can use [import maps](https://github.com/WICG/import-maps) to explicitly map a list of bare specifiers to URLs in the browser, while relying on `nodenext`’s default node_modules lookups, or on `paths`, to direct TypeScript to type declaration files for those bare specifier imports: +或者，你可以使用 [import maps](https://github.com/WICG/import-maps) 来明确地将一系列裸模块标识符映射到浏览器中的 URL，同时依赖于 `nodenext` 的默认 node_modules 查找，或者依赖于 `paths`，来指导 TypeScript 找到那些裸模块标识符导入的类型声明文件： ```html