如何摆脱“@rollup/plugin-typescript: Rollup 'sourcemap' 选项必须设置为生成源映射。”警告?

Posted

技术标签:

【中文标题】如何摆脱“@rollup/plugin-typescript: Rollup \'sourcemap\' 选项必须设置为生成源映射。”警告?【英文标题】:How to get rid of the "@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps." warning?如何摆脱“@rollup/plugin-typescript: Rollup 'sourcemap' 选项必须设置为生成源映射。”警告? 【发布时间】:2020-11-17 13:37:33 【问题描述】:

每次构建生产时都会收到此警告。当我为生产构建时,我在汇总输出配置中禁用源映射。

output: [ dir: "...", format: "...", sourcemap: isProd ? false : true ]

我在开发和生产中使用相同的 tsconfig,tsconfig.json


  "compilerOptions": 
    // Output
    "target": "ESNext",
    "module": "ESNEXT",
    "sourceMap": true,
    "jsx": "react",
    "noEmit": true,
    // Compile time code checking
    "strict": true,
    // Libraries
    "lib": ["dom", "esnext"],
    // Imports
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  ,
  "exclude": ["dist", "app"]

我了解到这是查看汇总插件源代码的警告的原因:

/**
 * Validate that the `compilerOptions.sourceMap` option matches `outputOptions.sourcemap`.
 * @param context Rollup plugin context used to emit warnings.
 * @param compilerOptions Typescript compiler options.
 * @param outputOptions Rollup output options.
 * @param autoSetSourceMap True if the `compilerOptions.sourceMap` property was set to `true`
 * by the plugin, not the user.
 */
function validateSourceMap(context, compilerOptions, outputOptions, autoSetSourceMap) 
    if (compilerOptions.sourceMap && !outputOptions.sourcemap && !autoSetSourceMap) 
        context.warn(`@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.`);
    
    else if (!compilerOptions.sourceMap && outputOptions.sourcemap) 
        context.warn(`@rollup/plugin-typescript: Typescript 'sourceMap' compiler option must be set to generate source maps.`);
    

但我不希望增加一个 tsconfig 用于开发和另一个用于生产的复杂性。

消除此警告的好方法是什么?

【问题讨论】:

【参考方案1】:

使用基本 tsconfig 并仅添加与 dev 和 prod 版本不同的选项,如参考所示:

https://github.com/microsoft/TypeScript/issues/9876

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends

【讨论】:

使用"sourceMap": true 设置禁用源地图;如果您要扩展一个,还要注意基本配置。 这对我来说效果很好:typescript(tsconfig: production? "./tsconfig.prod.json" : "./tsconfig.json",)【参考方案2】:

就我而言,我使用的是官方的 Svelte starter template,与 TypeScript 集成。

就我而言,我不需要将我的 tsconfig 更改为模板扩展的默认配置(具有 "sourceMap": true,);我只需要更改rollup.config.js 中的output.sourcemap 设置,使其与我传递给typescript() 插件的选项保持一致:

const production = !process.env.ROLLUP_WATCH;

export default 
    input: 'src/main.ts',
    output: 
//      sourcemap: true, // <-- remove
        sourcemap: !production,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    ,
    plugins: [
        svelte(
            preprocess: sveltePreprocess( sourceMap: !production ),
            compilerOptions: 
                dev: !production
            
        ),
        css( output: 'bundle.css' ),
        resolve(
            browser: true,
            dedupe: ['svelte']
        ),
        commonjs(),
        typescript(
            sourceMap: !production,
            inlineSources: !production
        ),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: 
        clearScreen: false
    
;

【讨论】:

以上是关于如何摆脱“@rollup/plugin-typescript: Rollup 'sourcemap' 选项必须设置为生成源映射。”警告?的主要内容,如果未能解决你的问题,请参考以下文章

警告为错误 - 如何摆脱这些

如何摆脱 MySQL 中的 STRICT SQL 模式

如何摆脱错误?

如何摆脱“hook”漏洞

如何摆脱 PHP 中的 filesize() 警告?

如何摆脱屏幕右侧的通知圈?