使用Antlr4的node api解析css3
编译官方的Css3.g4文件为node api
$ antlr4 -no-listener -visitor -Dlanguage=JavaScript css3.g4
编写index.js文件调用api
import antlr4 from 'antlr4' import MyCssLexer from './CssLexer' import MyCssParser from './CssParser' import MyCssVisitor from './CssVisitor' const chars = new antlr4.InputStream("@import 'xxx.css';") const lexer = new MyCssLexer(chars) const tokens = new antlr4.CommonTokenStream(lexer) const parser = new MyCssParser(tokens) parser.buildParseTrees = true const tree = parser.stylesheet() class Visitor extends MyCssVisitor { visitGoodImport(ctx) { console.log(ctx.String_().getText()) return this.visitChildren(ctx); } } tree.accept(new Visitor())
创建rollup.config.js文件
import commonjs from 'rollup-plugin-commonjs' import { nodeResolve } from '@rollup/plugin-node-resolve'; import nodePolyfills from 'rollup-plugin-node-polyfills'; export default { input: 'index.js', output: { file: 'bundle.js', format: 'es' }, plugins:[ commonjs(), nodePolyfills(), nodeResolve({ preferBuiltins: false }) ] };
打包,并运行
$ rollup --config rollup.config.js $ node bundle.js
遇到的问题:
- Antlr4打包出来的CssParser.js可能会有一些语法错误,我们可以自行修改一下。
赞助我
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: