通過webpack/babel修改ES6源代碼中的對象

ES6應用程序與webpack和babel插件捆綁在一起。是否可以修改一些源代碼，在每個對象中注入隱藏字段？通過webpack/babel修改ES6源代碼中的對象

一些巴貝爾/的WebPack插件，其中的WebPack替換，插件和巴貝爾，縮小替換，允許互操作現場訪問，並創建一些宏定義

但問題是包裝所有對象的創建，並插入一些領域以獨特的名字。它應該是無處不在 - 在對象創建文字，在休息傳播副本等，所以天真的取代正則表達式不是解決方案。

原始代碼：

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。它執行不同的任務，但可以很容易地適應原始任務

來源

2017-10-13 Vladislav Ihost

，你可以寫你自己的babel插件來做到這一點。 –

@FelixKling當然！也許，爲此目的的某個插件已經存在？或者有一些具有類似功能的插件，它們可以分叉並適用於原始任務？ –

也許，但要求提供軟件建議是一個非主題。 –

任務已通過手動編寫babel插件解決，該插件先執行源代碼修改，併爲每個活動對象注入元信息，包括原始文件名，行並在該文件的列，和對象的聲明的字符串表示

插件被提供作爲功能上要旨：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導入上述巴貝爾-插件稱爲

然後是從客戶端代碼的運行時的元信息爲每個對象obj將可經由obj.__SOURCE_DELCARATION__屬性不確定

來源

2017-10-24 10:15:20

此外，插件https://www.npmjs.com/package/babel-plugin-source-wrapper也可用於解決相同的任務，但它有警告：不包括源代碼代碼在元對象。對於某些任務來說它可能是好的，但是如果源代碼已經被'ES6'-like babel預設處理，然後打包到webpack包中，則無法檢索原始源代碼。但是它對於最終用戶來說是強制性的，這是最初的任務 –

通過webpack/babel修改ES6源代碼中的對象

回答

相關問題