- 编译官方的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可能会有一些语法错误,我们可以自行修改一下。
赞助我