在生产环境中隐藏来自开发者工具的原始 .svelte 文件

Question

目前，当我在浏览器中打开开发人员工具时，我可以看到我的原始 svelte 组件，我想隐藏此信息并仅发送丑化代码。

这是我打开开发者工具时得到的。我正在构建 single page application.

这是我的rollup.config.js

这是我用来运行 project/rollup 的脚本。在 package.json

中找到

 "scripts": {
      "build": "rollup -c",
      "dev": "rollup -c -w",
      "start": "sirv public --host 0.0.0.0 --port 2222 --single"
}

用于生产 i 运行 npm run build

我在 rollup.config.js 中设置了 sourcemap: false，源文件已从 /public/build 文件夹中消失，但是浏览器仍然显示组件

Answer 1

如果您使用 default svelte template 它配置为包含源映射，请在您的 rollup.config.js 中将输出对象更改为

output: {
   sourcemap: !production
}

这将在开发时启用 sourcemaps，但在生产时不会

Answer 2

简短回答： 在构建时使用最新的插件进行汇总，然后在 rollup.config.js 中设置 output.sourcemap: false

正如您在问题所附照片中看到的那样，.svelte 文件是蓝色的，这表明 Opera/DevTools 将它们视为 CSS 文件。

文件也在里面 /build

如果您设置 output.sourcemap: true，.svelte 文件将显示在 devtools 的新 /src 文件夹中，在 devtools 中将被视为 javascript 文件彩色黄色的。您还将在 /src 和 /build

中获得源文件

此问题是由于 rollup-plugin-svelte 版本 6.0.0 用于编译项目 CSS 的源映射。此 sourcemap 加载了整个原始 .svelte 文件，而不仅仅是 css。这将在开发工具中生成一个 CSS 文件，其中包含每个组件的完整代码（我的问题在 devtools 中为蓝色）

在 rollup-plugin-svelte 版本 7.0.0 中，此问题已解决，因为 rollup-plugin-svelte 不再处理 css 的生成，并且正在使用新插件 rollup-plugin-css-only（写作时v3.1.0）

解决方法：使用最新的插件（特别是rollup-plugin-svelte）

Answer 3

其他两个答案对我不起作用。无论我尝试什么，苗条的源文件仍然显示在 CSS 包源映射中。花了很长时间尝试配置汇总后我放弃了，只是写了一个内联插件来删除源映射文件：

function rmSourceMaps() {
  return {
    name: 'rmSourceMaps',
    generateBundle() {
      fs.rmSync('public/build/bundle.css.map', { force: true });
    }
  }
}

然后您可以像这样使用它：

{
  plugins: [
    production && rmSourceMaps()
  ]
}

在生产环境中隐藏来自开发者工具的原始 .svelte 文件

Hide raw .svelte files from developer tools in production

rollupjs

svelte