使用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可能会有一些语法错误,我们可以自行修改一下。

赞助我
WE9iV1nihU.png!large

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!