rollupjs - 如何摆脱“@rollup/plugin-typescript: Rollup 'sourcemap' 选项必须设置为生成源映射。” 警告?
问题描述
每次为生产而构建时,我都会收到此警告。当我为生产构建时,我在汇总输出配置中禁用源映射。
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 和另一个用于生产的复杂性。
什么是摆脱这个警告的好方法?
解决方案
在我的例子中,我使用了官方的Svelte starter template,与 TypeScript 集成。
就我而言,我不需要将我的 tsconfig 从模板扩展的默认配置(具有"sourceMap": true,
)更改;我只需要更改我的output.sourcemap
设置rollup.config.js
以使其与我传递给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
}
};
推荐阅读
- python-3.x - 如何使用python将数据附加和更新到字典中的相同键
- python - 用 Python 可视化 Panda
- python - 在 python 中为字符串计数器程序提供测试用例和输入时面临的问题
- laravel - 如何从控制器为任何客户端生成客户端访问令牌?
- nginx - Nginx 重写编码的 URI(带百分比)不工作
- c++ - c++ 如何删除/替换文件的最后一行?
- python - 希望在 python 中获取 Json 数组的特定值
- c++ - 无法包含 HTTPSClientSession
- javascript - 带有 node.js 的 MongoDB 尝试创建一个新文件 (JavaScript)
- c++ - 我怎样才能通过 std::basic_streambuf
* 进入没有#define的函数