问题

Question

使用

导入json文件时，typescript编译器工作正常

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

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

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

我的tsc compilerOptions目前读取

  "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

在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 2

使用
导入json文件时，typescript编译器工作正常
const tasks = require('./tasks.json')

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

即使你已经告诉TypeScript有关全局require函数的信息，它只是将它视为一个预期会返回某个函数的函数，它不会让编译器实际分析该函数需要什么（{{1并且对该文件做任何事情。这是Browserify或Webpack等工具的工作，可以解析"tasks.json"语句的代码库并加载任何内容（JS，CSS，JSON，图像等）到运行时捆绑包用于分发。

使用TypeScript 2.0，您甚至可以告诉TypeScript编译器有关模块路径模式的信息将由使用wildcard (*) module name declarations的Bundler（Browserify或Webpack）解析和加载：

require

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

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

这不会给出任何编译错误，并且会转换为类似import tasks from "./tasks.json";的内容，并且您的bundler将负责解析var tasks = require("./tasks.json")语句并构建包括JSON内容的包。

Answer 3

您可以在tsconfig.json的“ include”中明确指定它。例如，

<form id="myForm">
  <input type="radio" name="myRadio" value="0" />
  <input type="radio" name="myRadio" value="1" />
  <input type="radio" name="myRadio" value="2" />
</form>
<button onClick="test()">Test</button>

Answer 4

问题

对于想要复制所有 JSON文件的人们，使用TypeScript确实很困难。即使使用"resolveJsonModule": true，tsc也只会复制.json直接被引用的import文件。

这是一些想要执行动态运行时require()的示例代码。只有将所有JSON文件都复制到dist/ refuses的tsc文件夹中，此方法才能起作用。

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

const localConfigFile = `./config.${process.env.NODE_ENV || 'development'}.json`;

if (fs.existsSync(localConfigFile)) {
  // Does not work
  const envConfig = require(localConfigFile);
  Object.assign(config, envConfig);
}

解决方案1：分别复制json文件

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

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

它还需要额外的devDependency。但这确实达到了将所有.json文件复制到dist/文件夹中的原始目标。

例如：

$ 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。

解决方案2：使用js文件代替json文件

或者，不使用.json文件，而是将配置移到.js文件中，然后在"allowJs": true中启用tsconfig.json。然后tsc将为您复制文件。

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

我发现了这个想法recommended here，所以+1。

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

测试

请记住在构建之间清除dist/文件夹和tsconfig.tsbuildinfo，以便全面测试该过程。（tsc不会清除dist/文件夹，它只会向其中添加新文件，因此早期版本中遗留的旧文件可能会产生误导性的结果。）

Answer 5

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

告诉typescript编译json文件

5 个答案:

问题

解决方案1：分别复制json文件

解决方案2：使用js文件代替json文件

测试