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或打字稿。我在vscode中打开了项目，使用了node_modules软管，运行了npm install，进行了常规钻头..创建了一个新的JSON文件，安装了汇总json插件，并进行了构建。学习总数：0;

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

2 个答案: