通过webpack/babel修改ES6源代码中的对象 [英] Modify objects in ES6 source code by webpack/babel

问题描述

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

There is ES6-application which is bundled with webpack and babel plugins. Is it possible to modify some source code, to inject hidden field in every object?

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

Some babel/webpack plugins, including webpack-replace-plugin and babel-minify-replace, allows to interop field accessing and create some macro-definitions

但是问题是包装所有对象创建，并插入具有唯一名称的某些字段.它应该无处不在-在对象创建常量，剩余扩展副本等中，因此单纯用正则表达式替换不是解决方案.

But problem is wrap all object creation, and insert some field with unique name. It should be everywhere - in object creation literals, in rest-spread copy and so on, so naïve replace by regular expression is not solution.

原始代码:

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;

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

Of course, such operation will decrease optimization of original code, and it's required only for debug/development mode.

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

Update: Have found babel plugin, which has closest functionality for original task - https://github.com/JonAbrams/elsa . It perform different task, but can easily adapted for original task

推荐答案

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

Task had been solved by manually writing babel plugin, which performs prior modification of source code, and inject meta-information for each live object, including original file name, line and columns in that file, and string representation of object declaration

插件在gist上作为功能提供: https://gist.github.com/IhostVlad/9310188edbdbc9f62dc3107417cc8fe4

Plugin is provided as function on 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上方引用的

Where webpackServerConfig is original webpack config for production mode, and babelPluginObjectSource is imported referred above babel-plugin

然后是客户端代码中每个对象obj的运行时元信息，可以通过obj.__SOURCE_DELCARATION__属性获得

Then is runtime meta-information for each object obj from client code will be available via obj.__SOURCE_DELCARATION__ property

这篇关于通过webpack/babel修改ES6源代码中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！