javascript - 在 Node 和浏览器环境中使用 TextEncoder 类

Question

我想使用 Typescript 创建一个库。该库可以在 Node 和浏览器环境中使用，因此配置为两者提供支持

( tsconfig.json )

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "esModuleInterop": true,
    "lib": [ "esnext", "dom" ],
    "module": "commonjs",
    "outDir": "dist",
    "resolveJsonModule": true,
    "strict": true,
    "target": "es2019",
  },
  "include": [
    "./**/*.ts"
  ],
  "exclude": [
    "./dist"
  ]
}

我将 esbuild 用作 bundler 。 package.json 包含

{
  "name": "my-lib",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc && esbuild ./dist/index.js --bundle --minify --sourcemap --outfile=./bundle/index.js"
  },
  "dependencies": {
    "esbuild": "0.14.36"
  },
  "devDependencies": {
    "typescript": "4.6.3"
  }
}

该库使用了一些“私有(private)”辅助函数，我正在使用以下示例代码

import { TextEncoder } from 'util';

const encodeInput = function (input: string): Uint8Array {
  const textEncoder = new TextEncoder();

  return textEncoder.encode(input);
}

运行构建脚本命令会抛出一个 esbuild 错误，告诉我这只适用于 Node 环境，不适用于浏览器，这是有道理的，因为

• 此类来自util 包https://nodejs.org/api/util.html#class-utiltextencoder
• 此类不需要在浏览器环境中进行任何导入 https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder

我怎样才能确保这个库在“两个”世界中都能正常工作？

Answer 1

TextEncoder is a global在 Node 中，所以你不需要 import 它。直接使用它，无需 import 语句，就像在浏览器中一样。

You also don't need to instantiate a new TextEncoder every time the function is invoked: it is a small performance optimization to instantiate it once, and then just alias the encode method. See below.

const encoder = new TextEncoder();
const encode = encoder.encode.bind(encoder);

console.log(encode('hello world'));