时间戳

首页 > 解决方案 > @rollup/plugin-typescript 找不到 JSON 文件

json - @rollup/plugin-typescript 找不到 JSON 文件

问题描述

我已经设置了一个 Svelte 项目并希望使用 JSON 文件来使用 Svelte i18n 包。不幸的是，我无法导入 JSON 文件。它所需的软件包已安装，但我不知道为什么它的 Typescript 方面不接受它。

我在这里有一个最小的复制品。

import App from './App.svelte';

// src/index.js
import pkg from './package.json';
console.log(`running version ${pkg.version}`);

const app = new App({
    target: document.body,
    props: {
        name: "hello"
    }
});

export default app;

导入 JSON 文件会导致以下错误消息：

(!) Plugin typescript: @rollup/plugin-typescript TS2732: Cannot find module './locale.de.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

//rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;
    
    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        json({
            compact: true
        }),
        svelte({
            dev: !production,
            css: css => {
                css.write('bundle.css');
            },
            preprocess: sveltePreprocess(),
        }),

        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        typescript({
            sourceMap: !production,
            inlineSources: !production
        }),

        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

//tsconfig.json

{
  "resolveJsonModule": true,
  "module": "esnext",
  "sourceMap": true,
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

标签： jsontypescriptsvelte

解决方案

我有同样的问题。resolveJsonModule: true在每个打字稿调用中添加rollup.config.js可以解决问题。

这使我想到汇总插件不会以预期的方式将 tsconfig 与覆盖合并。

rollup.config.js

typescript({
    sourceMap: dev,
    inlineSources: dev,
    resolveJsonModule: true
  })

tsconfig.js

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "lib": ["DOM", "ES2017", "WebWorker"]
  },
  "esModuleInterop": true,
  "resolveJsonModule": true,
  "include": ["src/**/*", "src/node_modules/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "", "static/*"],
  "types": ["svelte", "@sapper"]
}

顺便提一句。我也在用 i18n 进行测试；）。

推荐阅读