如何摆脱“@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?
我每次为生产构建时都会收到此警告。当我为生产构建时,我在汇总输出配置中禁用源映射。
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"]
}
查看rollup插件源代码,我了解到这是警告的原因:
/**
* 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 而为生产添加另一个 tsconfig 的复杂性。
消除此警告的好方法是什么?
使用基本的 tsconfig 并仅添加与开发和生产版本不同的选项,作为参考参见:
就我而言,我使用的是官方 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
}
};
我每次为生产构建时都会收到此警告。当我为生产构建时,我在汇总输出配置中禁用源映射。
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"]
}
查看rollup插件源代码,我了解到这是警告的原因:
/**
* 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 而为生产添加另一个 tsconfig 的复杂性。
消除此警告的好方法是什么?
使用基本的 tsconfig 并仅添加与开发和生产版本不同的选项,作为参考参见:
就我而言,我使用的是官方 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
}
};