@rollup/plugin-json 打字稿不起作用

Question

我有一个有效的 appsettings.json 文件（根据 jsonlint.com），我已将 tsconfig resolveJsonModule 选项设置为 true。我正在导入 @rollup/plugin-json 并且尝试在插件链中的每个位置调用它。但我总是得到：

(!) Plugin json: Could not parse JSON file
appsettings.json
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
appsettings.json (2:10)

所以插件正在触发（我认为），但它无法解析文件，这似乎是有效的。汇总配置如下所示：

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import dev from 'rollup-plugin-dev';
import copy from 'rollup-plugin-copy';
import replace from '@rollup/plugin-replace';


// Loaders for non-ts/js file types
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';

console.log(`Node env is ${process.env.NODE_ENV}`);
// console.debug(process);
let isDevEnv = process.env.NODE_ENV === 'development'; 
let useMsw = process.env.USE_MSW;

const extensions = ['.cjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.css', '.png'];
// const intro = useMsw
//     ? 'global = window; window.NODE_ENV = process.env.NODE_ENV; window.USE_MSW = true'
//     : 'global = window; window.NODE_ENV = process.env.NODE_ENV; window.USE_MSW = false';

const intro = `global = window; window.NODE_ENV = process.env.NODE_ENV; ${useMsw ? 'window.USE_MSW = true;' : ''}`;
export default {
    input: [
        'src/index.tsx'
    ],
    output: {
        intro: intro,
        file: './dist/bundle.js',
        format: 'es',
        sourcemap: isDevEnv,
        inlineDynamicImports: true,

    },
    plugins: [
        postcss({}),
        resolve({
            extensions: extensions,
            browser: true
        }),
        commonjs(),
        typescript(),
        replace({
            'process.env.NODE_ENV': JSON.stringify('development')
        }),
        image(),
        copy({
            targets: [
                {src: './src/index.html', dest: './dist/'},
                {src: './src/mockServiceWorker.js', dest: './dist/'}
            ],
            verbose: true
        }),
        isDevEnv && dev('dist', {
            host: 'localhost'
        }),
        json(),
    ]
};

tsconfig 看起来像这样：

{
  "compilerOptions": {
    "declaration": false,
    "module": "ESNext",
    "noImplicitAny": true,
    "target": "ES2015",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": [
    "src/**/*.tsx",
    "src/**/*.ts",
    "declaration.d.ts",
    "src/components/TabularVIew/GridContainer/hooks"
  ],
  "exclude": ["node_modules"]
}

实际的 json 文件如下所示：

{
   "HUB_URL": "theHubUrl",
  "AUTH_ENDPOINT": "https://localhost:44330/API/Dispatch/Authentication/v1.0/authenticate",
  "POSITION_ENDPOINT": "https://localhost:44330/API/Dispatch/Data/v1.0/position",
  "SUMMARY_ENDPOINT": "https://localhost:44330/API/Dispatch/Data/v1.0/summaries",
  "GLOBAL_TLM": 1,
  "PERIOD_LENGTH_MINUTES": 30,  
  "EFA_BLOCKS": [
    [23,0,1,2],
    [3,4,5,6],
    [7,8,9,10],
    [11,12,13,14],
    [15,16,17,18],
    [19,20,21,22]
  ]
}

汇总输出是这样的：

(!) Plugin json: Could not parse JSON file
appsettings.json
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
appsettings.json (2:10)

非常令人沮丧，因为其中一行显示“插件 json 无法解析”，然后下一条日志行告诉我我需要插件 json？？？。文件无效、文件未找到、插件未安装，这些我都能理解。可能是 tsc 和插件之间发生冲突。没想法了.. 欢迎提出建议。 谢谢。

Answer 1

原因可能是json文件编码是

utf8withbom

。尝试将文件编码为

utf8

。

Answer 2

这并不是真正的答案，但该行为似乎与一些积极的缓存有关。通过 npm 或 typescript。我在 vscode 中打开了该项目，安装了 node_modules，运行了 npm install，通常进行了练习。创建了一个新的 JSON 文件，安装了 rollup json 插件，然后构建了它。学习总数：0；

Answer 3

不能投票，但Yansu的回答对我有用。您可以通过使用 Notepad++ > 编码 > UTF-8 打开 json 文件来更改文件编码。