babel

【推荐阅读】微服务还能火多久？>>> 团队： skFeTeam  本文作者：李世伟 作为前端程序员，webpack，rollup，babel，eslint这些是不是经常用到？他们是打包工具，代码编译工具，语法检查工具。他们是如何实现的呢？本文介绍的抽象语法树，就是他们用到的技术，是不是应该了解一下呢？ 本文没有晦涩难懂的理论，也没有大段大段的代码，完全从零开始，小白阅读也无任何障碍。通过本文的阅读，您将会了解AST的基本原理以及使用方法。 前言 什么是抽象语法树？ AST（Abstract Syntax Tree）是源代码的抽象语法结构树状表现形式。下面这张图示意了一段JavaScript代码的抽象语法树的表现形式。 抽象语法树有什么用呢？ IDE的错误提示、代码格式化、代码高亮、代码自动补全等 JSLint、JSHint、ESLint对代码错误或风格的检查等 webpack、rollup进行代码打包等 Babel 转换 ES6 到 ES5 语法 注入代码统计单元测试覆盖率 目录 1.AST解析器 2.AST in Babel 3.Demo with esprima 4.思考题 1.AST解析器 1.1 JS Parser解析器 AST是如何生成的？ 能够将JavaScript源码转化为抽象语法树（AST）的工具叫做JS Parser解析器。 JS Parser的解析过程包括两部分

module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: '', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: 'index.html', // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, // 构建多页面应用，页面的配置 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时，template 中的 title