告诉 typescript 编译 json 文件

Question

当我使用导入 json 文件时，打字稿编译器工作正常

const tasks = require('./tasks.json')

但是，当我运行tsc时，输出目录不包含tasks.json文件，导致运行时错误。

有没有办法告诉编译器它应该复制所有 json 文件，或者我应该手动将所有 json 文件复制/粘贴到 dist 目录中？

我的 tsc 编译器选项当前读取

  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "removeComments": false,
    "outDir": "./dist/",
    "sourceMap": true,
    "pretty": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "sourceMap": true
  },

谢谢！

Answer 1

问题

对于想要复制所有 JSON 文件的人来说，在 TypeScript 中真的很难。即使使用"resolveJsonModule": true，tsc 也只会复制.json 直接由import 引用的文件。

这里是一些示例代码，它想要做一个动态运行时require()。这只有在所有 JSON 文件都已复制到 dist/ 文件夹中时才有效，这是 tsc refuses 要做的。

// Works
import * as config from './config.default.json';

const env = process.env.NODE_ENV || 'development';

const envConfigFile = `./config.${env}.json`;

// Does not work, because the file was not copied over
if (fs.existsSync(envConfigFile)) {
  const envConfig = require(envConfigFile);
  Object.assign(config, envConfig);
}

方案一：将 json 文件放在 src 树之外（推荐）

假设您有 /src/ 和 /dist/ 文件夹，您可以将 JSON 文件保存在项目的 / 文件夹中。然后位于/src/config/load-config.ts 的脚本可以在运行时执行此操作：

const envConfig = require(`../../config.${env}.json`);

// Or you could read manually without using require
const envConfigFile = path.join(__dirname, '..', '..', `config.${env}.json`);
const envConfig = JSON.parse(fs.readFileSync(envConfigFile, 'utf-8'));

这是最简单的解决方案。您只需要确保必要的配置文件将在生产环境中到位。

其余的解决方案将处理您确实希望将配置文件保留在 src/ 文件夹中并让它们出现在您的 dist/ 文件夹中的情况。

解决方案 2：导入所有可能的文件

对于上面的例子，我们可以这样做：

import * as config from './config.default.json';
import * as testingConfig from './config.testing.json';
import * as stagingConfig from './config.staging.json';
import * as productionConfig from './config.production.json';

这应该会导致指定的 json 文件被复制到 dist/ 文件夹中，所以我们的 require() 现在应该可以工作了。

缺点：如果有人想添加一个新的.json 文件，那么他们还必须添加一个新的导入行。

方案3：单独复制json文件（推荐）

您可以在tsc 完成后添加cpy-cli 或copyfiles 步骤to your build process 将所有.json 文件复制到dist/ 文件夹中。

这假设您使用 npm run build 或类似的东西进行构建。

例如：

$ npm install --save-dev cpy-cli

// To copy just the json files, add this to package.json
"postbuild": "cpy --cwd=src --parents '**/*.json' ../dist/",

// Or to copy everything except TypeScript files
"postbuild": "cpy --cwd=src --parents '**/*' '!**/*.ts' ../dist/",

现在npm run build 应该运行tsc，然后运行cpy。

缺点：需要额外的devDependency。您必须将此作为构建过程的一部分。

方案四：使用js文件代替json文件

或者，不要使用.json 文件。将它们移动到.js 文件中，并在您的tsconfig.json 中启用"allowJs": true。然后tsc 将为您复制文件。

您的新 .js 文件需要如下所示：module.exports = { ... };

我发现了这个想法recommended here。

注意：为了启用"allowJs": true，您可能还需要添加"esModuleInterop": true 和"declaration": false，甚至可能需要添加"skipLibCheck": true。这取决于您现有的设置。

还有另一个问题（抱歉我没有测试这个）：

• 如果tsc 的配置文件并非全部被其他文件静态引用，它们会转译它们吗？您的文件或其文件夹可能需要在 tsconfig.json 的 files 或 include 选项中明确引用。

解决方案5：使用ts文件而不是json文件

听起来很简单，但仍有一些问题需要考虑：

• 您的配置文件现在看起来像这样：const config = { ... }; export default config;

• 请参阅上面关于 files / include 选项的说明。

• 如果您在运行时动态加载配置文件，请不要忘记它们已被转译为 .js 文件。所以不要去尝试require().ts文件，因为它们不会在那里！

• 如果有人想更改配置文件，他们应该进行全新的tsc 构建。他们可以修改dist 文件夹中的转译.js 文件，但应该避免这种情况，因为这些更改可能会被未来的构建覆盖。

测试

在尝试此操作时，请确保在构建之间清除您的dist/ 文件夹和tsconfig.tsbuildinfo 文件，以便正确测试该过程。 p>

（tsc 并不总是清理dist/ 文件夹，有时它只是向其中添加新文件。因此，如果您不删除它们，早期实验遗留下来的旧文件可能会产生误导性结果！）

Answer 2

您始终可以使用打字稿代码获得项目的绝对路径。要做到这一点，只需通过 required 关键字而不是在 fs 模块的帮助下读取 JSON 文件。在文件路径中使用process.cwd() 访问打字稿项目目录：

import * as fs from 'fs';

const task: any = JSON.parse(fs.readFileSync(`${process.cwd()}/tasks.json`).toString());

要使其正常工作，您可能需要将运行脚本更改为 node dist/src/index.js，在该路径中指定 dist 文件夹。

Answer 3

在tsconfig.json中，添加

{
  "compilerOptions": {
     "resolveJsonModule": true,
   },
   "include": [
     "src/config/*.json"
  ]
}

请注意，它不会复制那些 json 文件，它们是 required。如果你需要动态 require 一些json 文件并需要将它们复制到dist，那么你需要从，例如，

return require("some.json") as YourType

到

return (await import("some.json")) as YourType

.

Answer 4

您可以将其包含在您的构建脚本中 && ncp src/res build/res，将文件直接复制到您的 outDir

Answer 5

在 typescript 2.9+ 中，您可以直接使用 JSON 文件，它会自动复制到 dist 目录。

这是tsconfig.json，需要最少的配置：

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop"             : true,
        "module"                      : "commonjs",
        "outDir"                      : "./dist",
        "resolveJsonModule"           : true,
        "target"                      : "es6"
    },
    "exclude"        : [
        "node_modules"
    ]
}

然后就可以创建一个json文件了。

{
    "address": "127.0.0.1",
    "port"   : 8080
}

示例用法：

import config from './config.json';

class Main {

    public someMethod(): void {
        console.log(config.port);
    }
}

new Main().someMethod();

如果您不使用 esModuleInterop 属性，您应该访问封装在默认字段中的 json 属性。 config.default.port.

Answer 6

当我使用导入 json 文件时，打字稿编译器工作正常

const tasks = require('./tasks.json')

只要您定义了全局 require() 函数，例如使用 node.d.ts，TypeScript 就不会抱怨这一点。使用香草设置，您实际上会get a compile error that require is not defined。

即使你告诉 TypeScript 有一个全局的 require 函数，它只是将它视为一个预期会返回某些内容的函数，它不会让编译器真正分析该函数需要什么 ("tasks.json") 和对该文件执行任何操作。这是Browserify 或Webpack 之类的工具的工作，它可以解析您的代码库以查找require 语句，并将几乎所有内容（JS、CSS、JSON、图像等）加载到运行时包中以进行分发。

更进一步，使用 TypeScript 2.0，您甚至可以使用 wildcard (*) module name declarations 告诉 TypeScript 编译器有关将由捆绑程序（Browserify 或 Webpack）解析和加载的模块路径模式：

declare module "*.json" {
    const value: any;
    export default value;
}

现在您可以使用 ES6 模块语法在 TypeScript 中导入 JSON：

import tasks from "./tasks.json";

这不会产生任何编译错误，并且会转译为 var tasks = require("./tasks.json") 之类的内容，并且您的捆绑程序将负责解析 require 语句并构建包含 JSON 内容的捆绑包。