AST 與前端工程化實戰

AST : 全稱為 Abstract Syntax Tree，意為抽象語法樹，它是源代碼語法結構的一種抽象表示。

AST 是一個非?；A但是同時非常重要的知識點，我們熟知的 TypeScript、babel、webpack、vue-cli 得都是依賴 AST 進行開發的。本文將通過 AST 與前端工程化的實戰向大家展示 AST 的強大以及重要性。

直播分享視頻地址：AST 與前端工程化實戰

一、初識 AST

1、demo-1

第一次看見 AST 這個概念的時候還是在《你不知道的 JavaScript》一書中看到的。我們先看個例子

const a = 1
復制代碼

傳統編譯語言中，源代碼執行會先經歷三個階段

  • 詞法分析階段：將字符組成的字符串分解成一個個代碼塊（詞法單元），例子中代碼會被解析成 const、a、=、1 四個詞法單元。

  • 語法分析階段：將詞法單元流轉換成一個由元素逐級嵌套組成的語法結構樹，即所謂的抽象語法樹。例子中被解析出來的 const、a、=、1 這四個詞法單元組成的詞法單元流則會被轉換成如下結構樹

[圖片上傳中...(image-143ec0-1567048431087-7)]

<figcaption></figcaption>

  • 代碼生成階段：將 AST 轉換成一系列可執行的機器指令代碼，對應例子的話就是機器通過執行指令會在內存中創建一個變量 a，并將值 1 賦值給它。

2、demo-2

我們再來拆解一個 recast 官方的例子，相對來說也會復雜一些

function add (a, b) {
  return a + b
}
復制代碼
  • 首先，進入到詞法分析階段，我們會拿到 function、add、(、a、,、b、)、{、return、a、+、b、} 13 個代碼塊
  • 然后進入語法分析階段，具體如圖所示

[圖片上傳中...(image-560773-1567048431086-6)]

<figcaption></figcaption>

上圖中的 FunctionDeclaration、Identifier、BlockStatement 等這些代碼塊的類型的說明請點擊鏈接自行查看：AST 對象文檔

二、recast

由于文章中用到的 AST 相關的依賴包是 recast ，加上它本身是木有文檔的，只有一個非常簡短的 README.md 文件，所以這里單獨開一篇對其常見的一些 API 做個介紹。開始之前，先給大家推薦一個在線查看 AST 結構的平臺，非常好用

相信對 babel 稍有了解的同學都知道，babel 有一系列包對 AST 進行了封裝，專門來處理編譯這塊的事宜。而 recast 也是基于 @babel/core、@babel/parser 、@babel/types等包進行封裝開發的。

引入

引入 recast 有兩種方法，一種是 import 的形式，一種則是 CommonJs 的形式，分別如下

  • import 形式
import { parse, print } from 'recast'
console.log(print(parse(source)).code)

import * as recast from 'recast'
console.log(recast.print(recast.parse(source)).code)
復制代碼
  • CommonJs 形式
const { parse, print } = require('recast')
console.log(print(parse(source)).code)

const recast = require('recast')
console.log(recast.print(recast.parse(source)).code)
復制代碼

引入了 recast 之后，我們一起來看看 recast 都能做些什么吧

1、recast.parse

我們回到我們例子，我們直接對它進行 parse ，看看 parse 后的 AST 結構是如何的

// parse.js
const recast = require('recast')

const code = `function add (a, b) {
  return a + b
}`

const ast = recast.parse(code)
// 獲取代碼塊 ast 的第一個 body，即我們的 add 函數
const add = ast.program.body[0]
console.log(add)
復制代碼

執行 node parse.js 即可在我們的終端查看到 add 函數的結構了

FunctionDeclaration {
  type: 'FunctionDeclaration',
  id: Identifier...,
  params: [Identifier...],
  body: BlockStatement...
}
復制代碼

當然你想看更多內容直接去 AST Explorer 平臺 將模式調成 recast 模式即可看到 ast 的全覽了，和我們上面分析的內容基本是一致的。

[圖片上傳中...(image-68f72c-1567048431086-5)]

<figcaption></figcaption>

2、recast.print

目前為止，我們只是對其進行了拆解，如果將 ast 組裝成我們能執行的代碼呢？OK，這就需要用到 recast.print 了，我們對上面拆解好的代碼原封不動的組裝起來

// print.js
const recast = require('recast')

const code = `function add (a, b) {
  return a + b
}`

const ast = recast.parse(code)

console.log(recast.print(ast).code)
復制代碼

然后執行 node print.js ，可以看到，我們打印出了

function add (a, b) {
  return a + b
}
復制代碼

官方給的解釋就是，這就只是一個逆向處理而已，即

recast.print(recast.parse(source)).code === source
復制代碼

3、recast.prettyPrint

除了我們上面提及的 recast.print 外，recast 還提供一個代碼美化的 API 叫 recast.prettyPrint

// prettyPrint.js
const recast = require('recast')

const code = `function add (a, b) {
  return a +                b
}`

const ast = recast.parse(code)

console.log(recast.prettyPrint(ast, { tabWidth: 2 }).code)
復制代碼

執行 node prettyPrint.js ，會發現 code 里面的 N 多空格都能被格式化掉，輸出如下

function add(a, b) {
  return a + b;
}
復制代碼

詳細的配置請自行查看：prettyPrint

4、recast.types.builders

i. API

關于 builder 的 API ，別擔心，我肯定是不會講的，因為太多了。

[圖片上傳中...(image-e34c1f-1567048431086-4)]

<figcaption></figcaption>

想要具體了解每一個 API 能做什么的，可以直接在 Parser API - Builders 中進行查看，或者直接查看 recast builders 定義

ii. 實戰階段

OK，終于進入到 recast 操作相關的核心了。我們要想改造我們的代碼，那么 recast.types.builders 則是我們最重要的工具了。這里我們繼續通過改造 recast 官方案例來了解 recast.types.builders 構建工具。

搞個最簡單的例子，現在我們要做一件事，那就是將 function add (a, b) {...} 改成 const add = function (a, b) {...} 。

我們從第一章節了解到，如果我們需要將其做成 const 聲明式的話，需要先一個 VariableDeclaration 以及一個 VariableDeclarator，然后我們聲明一個 function 則有需要創建一個 FunctionDeclaration，剩下的則是填充表達式的參數和內容體了。具體操作如下

// builder1.js
const recast = require('recast')
const {
  variableDeclaration,
  variableDeclarator,
  functionExpression
} = recast.types.builders

const code = `function add (a, b) {
  return a + b
}`

const ast = recast.parse(code)
const add = ast.program.body[0]

ast.program.body[0] = variableDeclaration('const', [
  variableDeclarator(add.id, functionExpression(
    null, // 這里弄成匿名函數即可
    add.params,
    add.body
  ))
])

const output = recast.print(ast).code

console.log(output)
復制代碼

執行 node builder1.js ，輸出如下

const add = function(a, b) {
  return a + b
};
復制代碼

看到這，是不是覺得很有趣。真正好玩的才剛開始呢，接下來，基于此例子，我們做個小的延伸。將其直接改成 const add = (a, b) => {...} 的格式。

這里出現了一個新的概念，那就是箭頭函數，當然，recast.type.builders 提供了 arrowFunctionExpression 來允許我們創建一個箭頭函數。所以我們第一步先來創建一個箭頭函數

const arrow = arrowFunctionExpression([], blockStatement([])
復制代碼

打印下 console.log(recast.print(arrow))，輸出如下

() => {}
復制代碼

OK，我們已經獲取到一個空的箭頭函數了。接下來我們需要基于上面改造的基礎進一步進行改造，其實只要將 functionExpression 替換成 arrowFunctionExpression 即可。

ast.program.body[0] = variableDeclaration('const', [
  variableDeclarator(add.id, b.arrowFunctionExpression(
    add.params,
    add.body
  ))
])
復制代碼

打印結果如下

const add = (a, b) => {
  return a + b
};
復制代碼

OK，到這里，我們已經知道 recast.types.builders 能為我們提供一系列 API，讓我們可以瘋狂輸出。

5、recast.run

讀取文件命令行。首先，我新建一個 read.js ，內容如下

// read.js
recast.run((ast, printSource) => {
  printSource(ast)
})
復制代碼

然后我再新建一個 demo.js，內容如下

// demo.js
function add (a, b) {
  return a + b
}
復制代碼

然后執行 node read demo.js，輸出如下

function add (a, b) {
  return a + b
}
復制代碼

我們能看出來，我們直接在 read.js 中讀出了 demo.js 里面的代碼內容。那么具體是如何實現的呢？

其實，原理非常簡單，無非就是直接通過 fs.readFile 進行文件讀取，然后將獲取到的 code 進行 parse 操作，至于我們看到的 printSource 則提供一個默認的打印函數 process.stdout.write(output)，具體代碼如下

import fs from "fs";

export function run(transformer: Transformer, options?: RunOptions) {
  return runFile(process.argv[2], transformer, options);
}

function runFile(path: any, transformer: Transformer, options?: RunOptions) {
  fs.readFile(path, "utf-8", function(err, code) {
    if (err) {
      console.error(err);
      return;
    }

    runString(code, transformer, options);
  });
}

function defaultWriteback(output: string) {
  process.stdout.write(output);
}

function runString(code: string, transformer: Transformer, options?: RunOptions) {
  const writeback = options && options.writeback || defaultWriteback;
  transformer(parse(code, options), function(node: any) {
    writeback(print(node, options).code);
  });
}
復制代碼

6、recast.visit

這是一個 AST 節點遍歷的 API，如果你想要遍歷 AST 中的一些類型，那么你就得靠 recast.visit 了，這里可以遍歷的類型與 recast.types.builders 中的能構造出來的類型一致，builders 做的事是類型構建，recast.visit 做事的事則是遍歷 AST 中的類型。不過使用的時候需要注意以下幾點

  • 每個 visit，必須加上 return false，或者 this.traverse(path)，否則報錯。
if (this.needToCallTraverse !== false) {
  throw new Error(
    "Must either call this.traverse or return false in " + methodName
  );
}
復制代碼
  • 在需要遍歷的類型前面加上 visit 即可遍歷，如需要遍歷 AST 中的箭頭函數，那么直接這么寫即可
recast.run((ast, printSource) => {
  recast.visit(ast, {
    visitArrowFunctionExpression (path) {
      printSource(path.node)
      return false
    }
  })
})
復制代碼

7、recast.types.namedTypes

一個用來判斷 AST 對象是否為指定類型的 API。

namedTypes 下有兩個 API，一個是 namedTypes.Node.assert：當類型不配置的時候，直接報錯退出。另外一個則是 namedTypes.Node.check：判斷類型是否一致，并輸出 true 或 false。

其中 Node 為任意 AST 對象，比如我相對箭頭函數做一個函數類型判定，代碼如下

// namedTypes1.js
const recast = require('recast')
const t = recast.types.namedTypes

const arrowNoop = () => {}

const ast = recast.parse(arrowNoop)

recast.visit(ast, {
  visitArrowFunctionExpression ({ node }) {
    console.log(t.ArrowFunctionExpression.check(node))
    return false
  }
})
復制代碼

執行 node namedTypes1.js，能看出打印臺輸出結果為 true。

同理，assert 用法也差不多。

const recast = require('recast')
const t = recast.types.namedTypes

const arrowNoop = () => {}

const ast = recast.parse(arrowNoop)

recast.visit(ast, {
  visitArrowFunctionExpression ({ node }) {
    t.ArrowFunctionExpression.assert(node)
    return false
  }
})
復制代碼

你想判斷更多的 AST 對象類型的，直接做替換 Node 為其它 AST 對象類型即可。

三、前端工程化

現在，咱來聊聊前端工程化。

前段工程化可以分成四個塊來說，分別為

  • 模塊化：將一個文件拆分成多個相互依賴的文件，最后進行統一的打包和加載，這樣能夠很好的保證高效的多人協作。其中包含

    1. JS 模塊化：CommonJS、AMD、CMD 以及 ES6 Module。
    2. CSS 模塊化：Sass、Less、Stylus、BEM、CSS Modules 等。其中預處理器和 BEM 都會有的一個問題就是樣式覆蓋。而 CSS Modules 則是通過 JS 來管理依賴，最大化的結合了 JS 模塊化和 CSS 生態，比如 Vue 中的 style scoped。
    3. 資源模塊化：任何資源都能以模塊的形式進行加載，目前大部分項目中的文件、CSS、圖片等都能直接通過 JS 做統一的依賴關系處理。

  • 組件化：不同于模塊化，模塊化是對文件、對代碼和資源拆分，而組件化則是對 UI 層面的拆分。

    1. 通常，我們會需要對頁面進行拆分，將其拆分成一個一個的零件，然后分別去實現這一個個零件，最后再進行組裝。
    2. 在我們的實際業務開發中，對于組件的拆分我們需要做不同程度的考量，其中主要包括細粒度和通用性這兩塊的考慮。
    3. 對于業務組件，你更多需要考量的是針對你負責業務線的一個適用度，即你設計的業務組件是否成為你當前業務的 “通用” 組件，比如我之前分析過的權限校驗組件，它就是一個典型的業務組件。感興趣的小伙伴可以點擊 傳送門 自行閱讀。

  • 規范化：正所謂無規矩不成方圓，一些好的規范則能很好的幫助我們對項目進行良好的開發管理。規范化指的是我們在工程開發初期以及開發期間制定的系列規范，其中又包含了

    1. 項目目錄結構
    2. 編碼規范：對于編碼這塊的約束，一般我們都會采用一些強制措施，比如 ESLint、StyleLint 等。
    3. 聯調規范：這塊可參考我以前知乎的回答，前后端分離，后臺返回的數據前端沒法寫，怎么辦？
    4. 文件命名規范
    5. 樣式管理規范：目前流行的樣式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
    6. git flow 工作流：其中包含分支命名規范、代碼合并規范等。
    7. 定期 code review
    8. … 等等

    以上這些，我之前也寫過一篇文章做過一些點的詳細說明，TypeScript + 大型項目實戰

  • 自動化：從最早先的 grunt、gulp 等，再到目前的 webpack、parcel。這些自動化工具在自動化合并、構建、打包都能為我們節省很多工作。而這些前端自動化其中的一部分，前端自動化還包含了持續集成、自動化測試等方方面面。

而，處于其中任何一個塊都屬于前端工程化。

四、實戰：AST & webpack loader

而本文提及的實戰，則是通過 AST 改造書寫一個屬于我們自己的 webpack loader，為我們項目中的 promise 自動注入 catch 操作，避免讓我們手動書寫那些通用的 catch 操作。

1、AST 改造

講了這么多，終于進入到我們的實戰環節了。那么我們實戰要做一個啥玩意呢？

場景：日常的中臺項目中，經常會有一些表單提交的需求，那么提交的時候就需要做一些限制，防止有人手抖多點了幾次導致請求重復發出去。此類場景有很多解決方案，但是個人認為最佳的交互就是點擊之后為提交按鈕加上 loading 狀態，然后將其 disabled 掉，請求成功之后再解除掉 loading 和 disabled 的狀態。具體提交的操作如下

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
}).catch(() => {
  this.loading = false
})
復制代碼

這樣看著好像還算 OK，但是如果類似這樣的操作一多，或多或少會讓你項目整體的代碼看起來有些重復冗余，那么如何解決這種情況呢？

很簡單，咱直接使用 AST 編寫一個 webpack loader，讓其自動完成一些代碼的注入，若我們項目中存在下面的代碼的時候，會自動加上 catch 部分的處理，并將 then 語句第一段處理主動作為 catch 的處理邏輯

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
})
復制代碼

我們先看看，沒有 catch 的這段代碼它的 AST 結構是怎樣的，如圖

[圖片上傳中...(image-afa359-1567048431085-3)]

<figcaption></figcaption>

其 MemberExpression 為

this.axiosFetch(this.formData).then
復制代碼

arguments 為

res => {
  this.loading = false
  this.handleClose()
}
復制代碼

OK，我們再來看看有 catch 處理的代碼它的 AST 結構又是如何的，如圖

[圖片上傳中...(image-8b6938-1567048431085-2)]

<figcaption></figcaption>

其 MemberExpression 為

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
}).catch
復制代碼

其中有兩個 ArrowFunctionExpression，分別為

// ArrowFunctionExpression 1
res => {
  this.loading = false
  this.handleClose()
}
// ArrowFunctionExpression 2
() => {
  this.loading = false
}
復制代碼

所以，我們需要做的事情大致分為以下幾步

  1. 對 ArrowFunctionExpression 類型進行遍歷，獲得其 BlockStatement 中的第一個 ExpressionStatement，并保存為 firstExp
  2. 使用 builders 新建一個空的箭頭函數，并將保存好的 firstExp 賦值到該空箭頭函數的 BlockStatement 中
  3. 對 CallExpression 類型進行遍歷，將 AST 的 MemberExpression 修改成為有 catch 片段的格式
  4. 將改造完成的 AST 返回

現在，按照我們的思路，我們一步一步來做 AST 改造

首先，我們需要獲取到已有箭頭函數中的第一個 ExpressionStatement，獲取的時候我們需要保證當前 ArrowFunctionExpression 類型的 parent 節點是一個 CallExpression 類型，并且保證其 property 為 promise 的then 函數，具體操作如下

// promise-catch.js
const recast = require('recast')
const {
  identifier: id,
  memberExpression,
  callExpression,
  blockStatement,
  arrowFunctionExpression
} = recast.types.builders
const t = recast.types.namedTypes

const code = `this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
})`
const ast = recast.parse(code)
let firstExp

recast.visit(ast, {
  visitArrowFunctionExpression ({ node, parentPath }) {
    const parentNode = parentPath.node
    if (
      t.CallExpression.check(parentNode) &&
      t.Identifier.check(parentNode.callee.property) &&
      parentNode.callee.property.name === 'then'
    ) {
      firstExp = node.body.body[0]
    }
    return false
  }
})
復制代碼

緊接著，我們需要創建一個空的箭頭函數，并將 firstExp 賦值給它

const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
復制代碼

隨后，我們則需要對 CallExpression 類型的 AST 對象進行遍歷，并做最后的 MemberExpression 改造工作

recast.visit(ast, {
  visitCallExpression (path) {
    const { node } = path

    const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
    const originFunc = callExpression(node.callee, node.arguments)
    const catchFunc = callExpression(id('catch'), [arrowFunc])
    const newFunc = memberExpression(originFunc, catchFunc)

    return false
  }
})
復制代碼

最后我們在 CallExpression 遍歷的時候將其替換

path.replace(newFunc)
復制代碼

初版的全部代碼如下

// promise-catch.js
const recast = require('recast')
const {
  identifier: id,
  memberExpression,
  callExpression,
  blockStatement,
  arrowFunctionExpression
} = recast.types.builders
const t = recast.types.namedTypes

const code = `this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
})`
const ast = recast.parse(code)
let firstExp

recast.visit(ast, {
  visitArrowFunctionExpression ({ node, parentPath }) {
    const parentNode = parentPath.node
    if (
      t.CallExpression.check(parentNode) &&
      t.Identifier.check(parentNode.callee.property) &&
      parentNode.callee.property.name === 'then'
    ) {
      firstExp = node.body.body[0]
    }
    return false
  }
})

recast.visit(ast, {
  visitCallExpression (path) {
    const { node } = path

    const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
    const originFunc = callExpression(node.callee, node.arguments)
    const catchFunc = callExpression(id('catch'), [arrowFunc])
    const newFunc = memberExpression(originFunc, catchFunc)

    path.replace(newFunc)

    return false
  }
})

const output = recast.print(ast).code
console.log(output)
復制代碼

執行 node promise-catch.js ，打印臺輸出結果

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
}).catch(() => {
  this.loading = false
})
復制代碼

所以能看出來，我們已經是完成了我們想要完成的樣子了

[圖片上傳中...(image-be2925-1567048431085-1)]

<figcaption></figcaption>

  1. 但是我們還得對一些情況做處理，第一件就是需要在 CallExpression 遍歷的時候保證其 arguments 為箭頭函數。

  2. 緊接著，我們需要判定我們獲取到的 firstExp 是否存在，因為我們的 then 處理中可以是一個空的箭頭函數。

  3. 然后防止 promise 擁有一些自定義的 catch 操作，則需要保證其 property 為 then。

  4. 最后為了防止多個 CallExpression 都需要做自動注入的情況，然后其操作又不同，則需要在其內部進行 ArrowFunctionExpression 遍歷操作

經過這些常見情況的兼容后，具體代碼如下

recast.visit(ast, {
  visitCallExpression (path) {
    const { node } = path
    const arguments = node.arguments

    let firstExp

    arguments.forEach(item => {
      if (t.ArrowFunctionExpression.check(item)) {
        firstExp = item.body.body[0]

        if (
          t.ExpressionStatement.check(firstExp) &&
          t.Identifier.check(node.callee.property) &&
          node.callee.property.name === 'then'
        ) {
          const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
          const originFunc = callExpression(node.callee, node.arguments)
          const catchFunc = callExpression(id('catch'), [arrowFunc])
          const newFunc = memberExpression(originFunc, catchFunc)

          path.replace(newFunc)
        }
      }
    })

    return false
  }
})
復制代碼

然后由于之后需要做成一個 webpack-loader，用在我們的實際項目中。所以我們需要對 parse 的解析器做個替換，其默認的解析器為 recast/parsers/esprima，而一般我們項目中都會用到 babel-loader ，所以我們這也需要將其解析器改為 recast/parsers/babel

const ast = recast.parse(code, {
  parser: require('recast/parsers/babel')
})
復制代碼

2、webpack loader

到這里，我們對于代碼的 AST 改造已經是完成了，但是如何將其運用到我們的實際項目中呢？

OK，這個時候我們就需要自己寫一個 webpack loader 了。

其實，關于如何開發一個 webpack loader，webpack 官方文檔 已經講的很清楚了，下面我為小伙伴們做個小總結。

i. 本地進行 loader 開發

首先，你需要本地新建你開發 loader 的文件，比如，我們這將其丟到 src/index.js 下，webpack.config.js 配置則如下

const path = require('path')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          // ... 其他你需要的 loader
          { loader: path.resolve(__dirname, 'src/index.js') }
        ]
      }
    ]
  }
}
復制代碼

src/index.js 內容如下

const recast = require('recast')
const {
  identifier: id,
  memberExpression,
  callExpression,
  blockStatement,
  arrowFunctionExpression
} = recast.types.builders
const t = recast.types.namedTypes

module.exports = function (source) {
  const ast = recast.parse(source, {
    parser: require('recast/parsers/babel')
  })

  recast.visit(ast, {
    visitCallExpression (path) {
      const { node } = path
      const arguments = node.arguments

      let firstExp

      arguments.forEach(item => {
        if (t.ArrowFunctionExpression.check(item)) {
          firstExp = item.body.body[0]

          if (
            t.ExpressionStatement.check(firstExp) &&
            t.Identifier.check(node.callee.property) &&
            node.callee.property.name === 'then'
          ) {
            const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
            const originFunc = callExpression(node.callee, node.arguments)
            const catchFunc = callExpression(id('catch'), [arrowFunc])
            const newFunc = memberExpression(originFunc, catchFunc)

            path.replace(newFunc)
          }
        }
      })

      return false
    }
  })

  return recast.print(ast).code
}
復制代碼

然后，搞定收工。

ii. npm 發包

這里我在以前的文章中提及過，這里不談了。如果還沒搞過 npm 發包的小伙伴，可以點擊下面鏈接自行查看

揭秘組件庫一二事（發布 npm 包片段）

OK，到這一步，我的 promise-catch-loader 也是已經開發完畢。接下來，只要在項目中使用即可

npm i promise-catch-loader -D
復制代碼

由于我的項目是基于 vue-cli3.x 構建的，所以我需要在我的 vue.config.js 中這樣配置

// js 版本
module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('babel-loader').loader('babel-loader').end()
      .use('promise-catch-loader').loader('promise-catch-loader').end()
  }
}
// ts 版本
module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('ts')
      .test(/\.ts$/)
      .use('cache-loader').loader('cache-loader').end()
      .use('babel-loader').loader('babel-loader').end()
      .use('ts-loader').loader('ts-loader').end()
      .use('promise-catch-loader').loader('promise-catch-loader').end()
  }
}
復制代碼

然后我項目里面擁有以下 promise 操作

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Action } from 'vuex-class'

@Component
export default class HelloWorld extends Vue {
  loading: boolean = false
  city: string = '上海'

  @Action('getTodayWeather') getTodayWeather: Function

  getCityWeather (city: string) {
    this.loading = true
    this.getTodayWeather({ city: city }).then((res: Ajax.AjaxResponse) => {
      this.loading = false
      const { low, high, type } = res.data.forecast[0]
      this.$message.success(`${city}今日：${type} ${low} - ${high}`)
    })
  }
}
</script>
復制代碼

然后在瀏覽器中查看 source 能看到如下結果

[圖片上傳中...(image-1fb21f-1567048431084-0)]

<figcaption></figcaption>

關于代碼，我已經托管到 GitHub 上了，promise-catch-loader

總結

到這步，我們的實戰環節也已經是結束了。當然，文章只是個初導篇，更多的類型還得小伙伴自己去探究。

AST 它的用處還非常的多，比如我們熟知的 Vue，它的 SFC(.vue) 文件的解析也是基于 AST 去進行自動解析的，即 vue-loader，它保證我們能正常的使用 Vue 進行業務開發。再比如我們常用的 webpack 構建工具，也是基于 AST 為我們提供了合并、打包、構建優化等非常實用的功能的。

總之，掌握好 AST，你真的可以做很多事情。

最后，希望文章的內容能夠幫助小伙伴了解到：什么是 AST？如何借助 AST 讓我們的工作更加效率？AST 又能為前端工程化做些什么？

作者：qiangdada
鏈接：https://juejin.im/post/5d50d1d9f265da03aa25607b
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言 在開發中，你是否會為了系統健壯性，亦或者是為了捕獲異步的錯誤，而頻繁的在 async 函數中寫 try/ca...
    心_c2a2閱讀 3,510評論 1贊 19
  • 說在前面：這些文章均是本人花費大量精力研究整理，如有轉載請聯系作者并注明引用，謝謝本文的受眾人群不是webpack...
    RockSAMA閱讀 6,978評論 2贊 7
  • Webpack學習總結 此文只是自己學習webpack的一些總結，方便自己查閱，閱讀不變，非常抱歉?。?下載安裝：...
    Lxs_597閱讀 1,007評論 0贊 0
  • 中國的孩子，被作文害得有多慘？ 少內容、沒方法，流水賬？ 沒興趣、缺想象，假大空？ 而且把原因歸到孩子身上？！ 作...
    功成作文閱讀 485評論 4贊 8
  • 啟愛教育第2天育兒分享： 痛苦是孩子學習的阻力。痛苦痛苦，心里一痛，學習就苦，歸根結底，孩子們是因為在學習過程中沒...
    啟愛教育工作室閱讀 159評論 0贊 0