@rollup/plugin-json 与打字稿不工作答案

【问题标题】：@rollup/plugin-json with typescript not working@rollup/plugin-json 与打字稿不工作
【发布时间】：2020-09-21 13:13:54
【问题描述】：

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

非常令人沮丧，因为在一行上它说'plugin json can't parse'，然后下一条日志行告诉我我需要plugin json???。无效文件，未找到文件，未安装插件，这些我能理解。可能是 tsc 和插件之间的冲突。没想法。。欢迎提出建议。谢谢。

【问题讨论】：

我只是将我的导入指向我的 package.json 并且构建良好。如果我将 package.json 剪切并粘贴到 myFile.json 中，则会因上述错误而失败。 package.json 和 myFile.json 都在同一文件夹级别。完全糊涂了。我还进入了插件的源文件并在“无法解析”错误之后添加了console.log(json)，它记录了{ "thing": "a value" }
我在下面尝试了@Mark D 的答案，但没有成功，因为我在 babel 扩展列表中添加了 .json 扩展。当我从那里删除扩展程序时，它起作用了

标签： json typescript rollup

【解决方案1】：

原因可能是json文件编码为utf8withbom。尝试将文件编码为utf8。

【讨论】：

奇怪的是这个答案有帮助。谢谢！开发人员为我们创造了如此脆弱的软件而感到羞耻......
我该怎么做？

【解决方案2】：

不是真正的答案，但该行为似乎与某些激进的缓存有关。通过 npm 或打字稿。我在 vscode 中打开了项目，冲洗了 node_modules，运行了 npm install，通常的 Drill.. 创建了一个新的 JSON 文件，安装了 rollup json 插件，然后它就构建了。学习总和：0；

【讨论】：