ts项目import方式引入json文件

从ts2.9版本开始支持import方式引入json文件，并且带有代码提示功能。此项特性可以很方便的使json文件参与ts项目的开发，并且分离了配置和代码，一举多得。

• ts项目中开启对json文件的代码提示

在tsconfig.json中修改如下代码：

"compilerOptions": {
    // 允许采用import方式引入json文件
    "resolveJsonModule": true,
    ...
}

这样即可开启对json文件的支持，ts文件中使用import "xxx.json"的方式即可引入代码中，并且包含对其键值的代码提示。

另外json文件的语言模式选择JSON with Comments可以在json文件中使用注释。

• 在webpack中配置支持json

光有tsc支持无法方便的用于生产环境中，以webpack为例，进行如下配置，使其支持json文件。

首先npm安装 json5-loader 的支持 。目的是为了使webpack可以支持带注释的json格式。

module. rules 配置下添加如下配置：

{
    // 匹配所有json文件
    test: /\.json$/,
    // 使用json5-loader处理json文件
    loader: 'json5-loader',
    // 代码类型选择auto
    type: "javascript/auto"
}

这样可以使tsc和webpack同时支持json的导入，大功告成！