当目标是浏览器时，现代 tsconfig.json 设置支持 ES6 导入/导出模块语法

Question

TLDR 我的目标是浏览器。使用 VSCode 编写打字稿并使用（样本）npm 包。我尽我所能检查，但我在浏览器控制台中收到未捕获的错误说

Uncaught ReferenceError: require is not defined

加长版：

我正在尝试使用名为 Graphemer 的包在我的打字稿项目中工作，但我在另一个包中遇到了类似的问题，所以我认为这是我的问题，而不是包。我在 VScode 中编写代码，目标是浏览器。这是我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es2016", 
    "module": "ES6",
    "moduleResolution": "node",
    "outDir": "./dist",
    "strict": true,   
    "skipLibCheck": true   
  }

node -v 给出版本 v16.17.0 tsc -v 给出版本 4.9.3 Chrome 浏览器版本为 111.0.5563.65（正式版）（64 位）

所以...

1. 我通过 $ npm i graphemer 将 Graphemer 安装到项目文件夹 /node_modules 文件夹中。

2. Graphemer github 中的文档说我可以在我自己的 TS 文件中做

import Graphemer from 'graphemer';

const splitter = new Graphemer();

3. 所以我做了一个 main.ts 文件包含

import Graphemer from "Graphemer";

function test() {
    const splitter = new Graphemer();
}

4. VSCode 或 TSC 中没有错误。我打开浏览器并查看控制台，我看到错误消息：

main.js:6 Uncaught ReferenceError: require is not defined
    at main.js:6:21

然后我查看 /dist/main.js 文件以查看

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Graphemer_1 = __importDefault(require("Graphemer"));
function test() {
    const splitter = new Graphemer_1.default();
}

当然有一行引用需要...

const Graphemer_1 = __importDefault(require("Graphemer"));

问题 - 当以浏览器为目标时，TSC 的正确配置是什么，以生成 JS 以简单地使用 ES6 导入/导出模块语法？

补充资料：

Graphemer文件/node_modules/Grapheme /lib/indexjs的内容为

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Graphemer_1 = __importDefault(require("./Graphemer"));
exports.default = Graphemer_1.default;
console.log('exports',exports)

Answer 1

要在浏览器托管的应用程序中使用

npm

模块，您需要使用 Vite、Webpack、Rollup、Browserify 等捆绑器。那是因为您不会在

node_modules

中提供整个

script

目录应用程序中的标签。在这种情况下，捆绑器的目的是将您的代码 与来自 node_modules

 的

代码一起包装起来，并将其放入“捆绑包”中，然后将其包含在您的浏览器应用程序中。

或者，您可以直接通过

https://www.npmjs.com

使用许多 npm 模块，其中许多模块也可以在像 https://cdnjs.com/ 这样的 CDN 上使用，您可以在其中 在你的脚本标签中直接引用它们。