@rollup/plugin-json 在 typescript 中無法使用

我有一個有效的 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)

所以這個插件正在運行（我想），但它無法解析該檔案，而該檔案似乎是有效的。Rollup 配置看起來像這樣：

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]
  ]
}

而 rollup 的輸出是這個：

(!) 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 和插件之間的衝突。沒主意了……歡迎任何建議。謝謝。

答案＃1

造成這個原因可能是 json 檔案的編碼是 utf8withbom。嘗試將檔案編碼為 utf8。

答案＃2

不算真正的答案，但這個行為似乎與某些激進的快取有關。可能是 npm 或 typescript 的緣故。我在 vscode 中打開了專案，刪掉了 node_modules，運行了 npm install，按常規操作……創建了一個新的 JSON 文件，安裝了 rollup JSON 插件，然後它就成功編譯了。總結學到的東西：0；