无法进入汇总插件替换定义的对象

Question

在 Svelte 组件中，我正在尝试访问我在汇总配置文件中设置的对象。我的 rollup.config.js 文件如下所示：

import replace from '@rollup/plugin-replace';

...
export default {
...
    replace({
        foo: JSON.stringify({ bar: 'Hello' }),
    }),

...

在我的 Svelte 组件中，一个简单的 console.log(foo) 有效：

但是当我尝试进入 console.log(foo.bar) 之类的 foo 对象时，我得到 foo is not defined:

Answer 1

好问题！对象 foo 仍然未定义，所以它抛出正确的错误，并且无法找到 foo 来替换任何你要替换它的东西。

解决方案是让替换插件完成它的工作。您可以在 js 或 .svelte 文件

中像这样访问您的变量


const { bar } = foo;

console.log(bar);

注意：此插件已更改，请查看 here 了解详细信息。如果您打算通过 dotenv 考虑使用环境变量

import { config } from "dotenv";

...
replace({
      values: {
        foo: JSON.stringify({ bar: "Hello", ...config().parsed }),
      },
    }),
...

并在您的 svelte 文件中

  const { bar, ...rest } = foo;
  console.log("bar=>", bar);
  console.log("env=>", rest);

Answer 2

文档的这一部分解释了您的确切问题。
https://github.com/rollup/plugins/tree/master/packages/replace#delimiters

delimiters 选项控制字符串的匹配方式。默认的 delimiters 是 ['\b', '\b(?!\.)']，它只会替换 foo 如果它遵循一个单词边界并且后面跟着一个不是点的单词边界。因此，您的 rollup.config.js 行为将是

console.log(foo)
// becomes
console.log({"bar":"Hello"})

console.log(foo.bar)
// is not replaced by the plugin as `foo` IS followed by a dot

console.log(foo['bar'])
console.log(foo .bar) // space after `foo`
// both satisfy the delimiter check again and print: Hello
// (horrible coding style in the latter but to illustrate how it works)

const { bar } = foo
// also satisfy the delimiter check hence
console.log(bar) // prints: Hello

如您所见，替换插件并不真正解析您的代码，而只是执行简单的文本替换，与 IDE/editor 的 search-and-replace 功能没有太大区别。高斯下面会说什么？

console.log('foo')
// Guess what?
// ...
// ...
// printed: {"bar":"Hello"}
// as if it were
console.log('{"bar":"Hello"}')

总而言之，您的解决方法可能是

foo['bar'],
const { bar } = foo,
避免对象替换并使用 __FOO_BAR__、__FOO_BAZ__、...
传递 delimiters: ['\b', '\b'] 以允许点跟随键。

（但是在撰写本文时，由于等待合并的错误修复，最后一个似乎还没有工作）。
https://github.com/rollup/plugins/pull/1088

如果您使用 delimiters: ['', ''] 之前的警告需要更高级别的谨慎。甚至字符串文字 'food' 或 HTML 模板标记 <footer> 也可能会更改为乱码，如 '{"bar":"Hello"}d' 或 <{"bar":"Hello"}ter>。因此，根据您的使用情况明智地命名您的密钥或使用一些不寻常的分隔符，例如插件的旧版本曾经演示过的内容：delimiters: ['<@', '@>'].
https://github.com/rollup/rollup-plugin-replace

尽管如此，由于这种预处理是非常基本的，因此在添加替换键和使用它们时始终需要小心。

无法进入汇总插件替换定义的对象

Can't go into object defined by rollup plugin-replace

javascript

rollupjs

svelte

svelte-3