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上面导入的<{1}}

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

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

1 个答案: