Javascript 使用asm更改网页包插件内容
问题 您好,我正在尝试编写一个插件,并使用ast解析文件。但我不能对代码进行更改。例如,此代码不会将div更改为label。改变ast的正确方法是什么Javascript 使用asm更改网页包插件内容,javascript,webpack,webpack-4,Javascript,Webpack,Webpack 4,问题 您好,我正在尝试编写一个插件,并使用ast解析文件。但我不能对代码进行更改。例如,此代码不会将div更改为label。改变ast的正确方法是什么 apply(compiler) { compiler.hooks.normalModuleFactory.tap('MyPlugin', (factory) => { factory.hooks.parser.for('javascript/auto').tap('MyPlugin', (parser,
apply(compiler) {
compiler.hooks.normalModuleFactory.tap('MyPlugin', (factory) => {
factory.hooks.parser.for('javascript/auto').tap('MyPlugin', (parser, options) => {
parser.hooks.program.tap('MyPlugin', (ast, comments) => {
if (parser.state &&
parser.state.module &&
parser.state.module.resource.indexOf('node_modules') === -1) {
if (parser.state.module.resource.endsWith('tsx')) {
var g = ast.body.filter(n=> n.type === 'ExportNamedDeclaration');
for (let a of g) {
var decl = a.declaration.declarations;
if (decl && decl[0]) {
decl[0].init.body.body[0].argument.arguments[0].raw = 'label';
decl[0].init.body.body[0].argument.arguments[0].value = 'label';
}
}
}
}
});
});
});
}`
我只需要将div更改为return块中的label,或者将data attr添加到div中。我不想使用正则表达式替换所有文件内容,我想使用ast。
MyComponent.tsx可以如下所示:
import * as React from 'react';
import * as style from './MyComponent.css';
export const MyComponent = (props) => {
return (
<div className={style['test']}>bla bla</div>
);
};
import*as React from'React';
从“/MyComponent.css”导入*作为样式;
导出常量MyComponent=(道具)=>{
返回(
布拉布拉
);
};
可能有人可以提供一个小示例来更改webpack插件中的抽象语法树。如注释中所述,并在中的webpack代码中指出,webpack忽略在点击中更改语法分析器AST的尝试 插件将使用ast作为只读映射,以在中构建新的依赖项。(由于多个插件可以添加到依赖关系图中,而不会通过更改引用AST而使彼此无效,因此排序和并行执行的脆弱性较低。) 基于和Define插件,使用ast为转换构建依赖关系的示例如下所示:
"use strict";
const pluginName = 'MyPlugin';
const NullFactory = require('webpack/lib/NullFactory');
const ConstDependency = require("webpack/lib/dependencies/ConstDependency");
class MyPlugin {
apply(compiler) {
compiler.hooks.compilation.tap(
"MyPlugin",
(compilation, { normalModuleFactory }) => {
compilation.dependencyFactories.set(ConstDependency, new NullFactory());
compilation.dependencyTemplates.set(
ConstDependency,
new ConstDependency.Template()
);
});
compiler.hooks.normalModuleFactory.tap('MyPlugin', (factory) => {
factory.hooks.parser.for('javascript/auto').tap('MyPlugin', (parser, options) => {
parser.hooks.program.tap('MyPlugin', (ast, comments) => {
if (parser.state &&
parser.state.module &&
parser.state.module.resource.indexOf('node_modules') === -1) {
if (parser.state.module.resource.endsWith('tsx')) {
var g = ast.body.map(n => {
try {
let {expression:{left:{property:{name:my}}, right:{body:{body:[{argument:{arguments:[div]}}]}}}} = n
return my == 'MyComponent' && div.value == 'div' ? div: false
} catch(e) {
return false;
}
}).filter(e=>e);
for (let div of g) {
let dep = new ConstDependency(JSON.stringify('label'), div.range);
dep.loc = div.loc;
parser.state.current.addDependency(dep);
}
}
}
});
});
});
}
}
module.exports= MyPlugin;
其中,解析器提供的
ast
可能会因加载程序的不同和输入的更改而有很大的不同。您可能需要返回修改后的ast。您可以签出DefinePlugin来检查它是如何修改代码的:您正在测试的模块是什么样子的?我更新了问题。felixmosh,谢谢您的回复,但我在DefinePlugin中找不到,他们正在修改并尝试添加UseStrictPlugin:谢谢,这对我帮助很大!