通过 webpack/babel 修改 ES6 源代码中的对象

Question

有 ES6 应用程序，它与 webpack 和 babel 插件捆绑在一起。是否可以修改一些源代码，在每个对象中注入隐藏字段？

一些 babel/webpack 插件，包括 webpack-replace-plugin 和 babel-minify-replace，允许互操作字段访问和创建一些宏定义

但问题是包装所有对象创建，并插入一些具有唯一名称的字段。它应该无处不在 - 在对象创建文字中，在剩余传播副本中等等，所以用正则表达式替换天真不是解决方案。

原码：

const obj1 = { aaa:10, bbb:20  };
const obj2 = new Object();
const obj3 = { ...obj1, ddd: 20 };
const arr = [1, 2, 3];
const str = new String("ABC");

转换后的代码：

const obj1 = { aaa:10, bbb:20, SECRET_PROPERTY: true  };
const obj2 = new Object(); obj2.SECRET_PROPERTY = true;
const obj3 = { ...obj1, ddd: 20, SECRET_PROPERTY: true };
const arr = [1, 2, 3]; arr.SECRET_PROPERTY = true;
const str = new String("ABC"); str.SECRET_PROPERTY = true;

当然，这样的操作会减少对原始代码的优化，仅在调试/开发模式下需要。

更新：找到了 babel 插件，它具有最接近原始任务的功能 - https://github.com/JonAbrams/elsa 。它执行不同的任务，但可以轻松适应原始任务

Answer 1

任务已通过手动编写babel插件解决，该插件执行源代码的预先修改，并为每个活动对象注入元信息，包括原始文件名、该文件中的行和列以及对象的字符串表示声明

插件作为 gist 上的函数提供：https://gist.github.com/IhostVlad/9310188edbdbc9f62dc3107417cc8fe4

webpack 的典型用法如下

if(process.env.NODE_ENV !== 'production') {
    webpackServerConfig.module.rules.forEach(rule =>
        rule.loaders.filter(({ loader }) => loader === 'babel-loader').forEach(
            loader =>
                (loader.query.presets = [
                    {
                        plugins: [babelPluginObjectSource]
                    }
                ].concat(Array.isArray(loader.query.presets) ? loader.query.presets : []))
        )
    );
}

webpackServerConfig 是生产模式的原始 webpack 配置，babelPluginObjectSource 是上面提到的 babel-plugin 导入

然后是来自客户端代码的每个对象obj 的运行时元信息将通过obj.__SOURCE_DELCARATION__ 属性提供