前端必修课ES2017下的构建工具原理与实战

46次阅读

共计 9851 个字符，预计需要花费 25 分钟才能阅读完成。

ES2017+，你不再需要纠结于复杂的构建工具技术选型。

也不再需要 gulp,grunt,yeoman,metalsmith,fis3。

以上的这些构建工具，可以脑海中永远划掉。

100 行代码，你将透视构建工具的本质。

100 行代码，你将拥有一个现代化、规范、测试驱动、高延展性的前端构建工具。

在阅读前，给大家一个小悬念：

  • 什么是链式操作、中间件机制？
  • 如何读取、构建文件树？
  • 如何实现批量模板渲染、代码转译？
  • 如何实现中间件间数据共享。

相信学完这一课后，你会发现————这些专业术语，背后的原理实在。。。太简单了吧！

构建工具体验：弹窗 +uglify+ 模板引擎 +babel 转码 …

如果想立即体验它的强大功能，可以命令行输入 npx mofast example，将会构建一个mofast-example 文件夹。

进入文件后运行node compile，即可体验功能。

顺便说一句，npx mofast example命令行本身，也是用本课的构建工具实现的。——是不是不可思议？

本课程代码已在 npm 上进行发布，直接安装即可

npm i mofast -D即可在任何项目中使用 mofast，替代 gulp/grunt/yeoman/metalsmith/fis3 进行安装使用。

本课程 github 地址为：https://github.com/wanthering… 在学完课程后，你就可以提交 PR，一起维护这个库，使它的扩展性越来越强！

第一步：搭建 github/npm 标准开发栈

请搭建好以下环境：

  • jest 测试环境
  • eslint 格式标准化环境
  • babel es2017 代码环境

或者直接使用npx lunz mofast

然后一路回车。

构建出的文件系统如下

├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── circle.yml
├── package.json
├── src
│   └── index.js
├── test
│   └── index.spec.js
└── yarn.lock

第二步：搭建文件沙盒环境

构建工具，都需要进行文件系统的操作。

在测试时，常常污染本地的文件系统，造成一些重要文件的意外丢失和修改。

所以，我们往往会为测试做一个“沙盒环境”

在 package.json 同级目录下，输入命令

 mkdir __mocks__ && touch __mocks__/fs.js
 
 yarn add memfs -D
 yarn add fs-extra

创建 __mocks__/fs.js 文件后，写入：

const {fs} = require('memfs')
module.exports = fs

然后在测试文件 index.spec.js 的第一行写下：

jest.mock('fs')
import fs from 'fs-extra'

解释一下：__mocks__中的文件将自动加载到测试的 mock 环境中，而通过 jest.mock(‘fs’)，将覆盖掉原来的 fs 操作，相当于整个测试都在沙盒环境中运行。

第三步：一个类的基础配置

src/index.js

import {EventEmitter} from 'events'

class Mofast extends EventEmitter {constructor () {super()
    this.files = {}
    this.meta = {}}

  source (patterns, { baseDir = '.', dotFiles = true} = {}) {// TODO: parse the source files}

  async dest (dest, { baseDir = '.', clean = false} = {}) {// TODO: conduct to dest}
}

const mofast = () => new Mofast()

export default mofast

使用 EventEmitter 作为父类，是因为需要 emit 事件，以监控文件流的动作。

使用 this.files 保存文件链。

使用 this.meta 保存数据。

在里面写入了 source 方法，和 dest 方法。使用方法如下：

test/index.spec.js

import fs from 'fs-extra'
import mofast from '../src'
import path from "path"

jest.mock('fs')

// 准备原始模板文件
const templateDir = path.join(__dirname, 'fixture/templates')
fs.ensureDirSync(templateDir)
fs.writeFileSync(path.join(templateDir, 'add.js'), `const add = (a, b) => a + b`)


test('main', async ()=>{await mofast()
    .source('**', {baseDir: templateDir})
    .dest('./output', {baseDir: __dirname})

  const fileOutput = fs.readFileSync(path.resolve(__dirname, 'output/tmp.js'), 'utf-8')
  expect(fileOutput).toBe(`const add = (a, b) => a + b`)
})

现在，我们以跑通这个 test 为目标，完成 Mofast 类的初步编写。

第四步：类 gulp，链式文件流操作实现。

source 函数：

将参数中的 patterns, baseDir, dotFiles 挂载到 this 上，并返回 this, 以便于链式操作即可。

dest 函数：

dest 函数，是一个异步函数。

它完成两个操作：

  1. 将源文件夹中所有文件读取出来，赋值给 this.files 对象上。
  2. 将 this.files 对象中的文件，写入到目标文件夹的位置。

可以这两个操作分别独立成两个异步函数：
process()，和 writeFileTree()

process 函数

  1. 使用 fast-glob 包，读取目标文件夹下的所有文件的状态 stats，返回一个由文件的状态 stats 组成的数组
  2. 从 stats.path 中取得绝对路径，采用 fs.readFile()读取绝对路径中的内容 content。
  3. 将 content, stats, path 一起挂载到 this.files 上。

注意，因为是批量处理，需要采用 Promise.all()同时执行。

假如 /fixture/template/add.js 文件的内容为const add = (a, b) => a + b

处理后的 this.file 对象示意：

{
    'add.js': {content: 'const add = (a, b) => a + b',
        stats: {...},
        path: '/fixture/template/add.js'
    }
}

writeFileTree 函数

遍历 this.file，使用 fs.ensureDir 保证文件夹存在后, 将 this.file[filename].content 写入绝对路径。

import {EventEmitter} from 'events'
import glob from 'fast-glob'
import path from 'path'
import fs from 'fs-extra'

class Mofast extends EventEmitter {constructor () {super()
    this.files = {}
    this.meta = {}}

  /**
   * 将参数挂载到 this 上
   * @param patterns  glob 匹配模式
   * @param baseDir   源文件根目录
   * @param dotFiles   是否识别隐藏文件
   * @returns this 返回 this，以便链式操作
   */
  source (patterns, { baseDir = '.', dotFiles = true} = {}) {
    //
    this.sourcePatterns = patterns
    this.baseDir = baseDir
    this.dotFiles = dotFiles
    return this
  }

  /**
   * 将 baseDir 中的文件的内容、状态和绝对路径，挂载到 this.files 上
   */
  async process () {
    const allStats = await glob(this.sourcePatterns, {
      cwd: this.baseDir,
      dot: this.dotFiles,
      stats: true
    })

    this.files = {}
    await Promise.all(
      allStats.map(stats => {const absolutePath = path.resolve(this.baseDir, stats.path)
        return fs.readFile(absolutePath).then(contents => {this.files[stats.path] = {contents, stats, path: absolutePath}
        })
      })
    )
    return this
  }

  /**
   * 将 this.files 写入目标文件夹
   * @param destPath 目标路径
   */
  async writeFileTree(destPath){
    await Promise.all(Object.keys(this.files).map(filename => {const { contents} = this.files[filename]
        const target = path.join(destPath, filename)
        this.emit('write', filename, target)
        return fs.ensureDir(path.dirname(target))
          .then(() => fs.writeFile(target, contents))
      })
    )
  }

  /**
   *
   * @param dest   目标文件夹
   * @param baseDir  目标文件根目录
   * @param clean   是否清空目标文件夹
   */
  async dest (dest, { baseDir = '.', clean = false} = {}) {const destPath = path.resolve(baseDir, dest)
    await this.process()
    if(clean){await fs.remove(destPath)
    }
    await this.writeFileTree(destPath)
    return this
  }
}

const mofast = () => new Mofast()

export default mofast

执行yarn test，测试跑通。

第五步：中间件机制

如果说我们正在编写的类，是一把枪。

那么中间件，就是一颗颗子弹。

你需要一颗颗将子弹推入枪中，然后一次全部打出去。

写一个测试用例，将 add.js 文件中的 const add = (a, b) => a + b 修改为var add = (a, b) => a + b

test/index.spec.js

test('middleware', async () => {const stream = mofast()
    .source('**', { baseDir: templateDir})
    .use(({files}) => {const contents = files['add.js'].contents.toString()
      files['add.js'].contents = Buffer.from(contents.replace(`const`, `var`))
    })

  await stream.process()
  expect(stream.fileContents('add.js')).toMatch(`var add = (a, b) => a + b`)
})

好，现在来实现 middleware

在 constructor 里面初始化 constructor 数组

src/index.js > constructor

  constructor () {super()
    this.files = {}
    this.middlewares = []}

创建一个 use 函数，用来将中间件推入数组，就像一颗颗子弹推入弹夹。

src/index.js > constructor

  use(middleware){this.middlewares.push(middleware)
    return this
  }

在 process 异步函数中，处理完文件之后，立即执行中间件。注意，中间件的参数应该是 this，这样就可以取到挂载在主类上面的 this.files、this.baseDir 等参数了。

src/index.js > process

async process () {
    const allStats = await glob(this.sourcePatterns, {
      cwd: this.baseDir,
      dot: this.dotFiles,
      stats: true
    })

    this.files = {}
    await Promise.all(
      allStats.map(stats => {const absolutePath = path.resolve(this.baseDir, stats.path)
        return fs.readFile(absolutePath).then(contents => {this.files[stats.path] = {contents, stats, path: absolutePath}
        })
      })
    )


    for(let middleware of this.middlewares){await middleware(this)
    }
    return this
  }

最后，我们新写了一个方法 fileContents，用于读取文件对象上面的内容，以便进行测试

  fileContents(relativePath){return this.files[relativePath].contents.toString()}

执行一下yarn test，测试通过。

第六步：模板引擎、babel 转译

既然已经有了中间件机制.

我们可以封装一些常用的中间件，例如 ejs / handlebars 模板引擎

使用前的文件内容是：
my name is <%= name %> 或my name is {{name}}

输入{name: 'jack}

得出结果my name is jack

以及 babel 转译：

使用前文件内容是：
const add = (a, b) => a + b

转译后得到var add = function(a, b){return a + b}

好，我们来书写测试用例：

// 准备原始模板文件
fs.writeFileSync(path.join(templateDir, 'ejstmp.txt'), `my name is <%= name %>`)
fs.writeFileSync(path.join(templateDir, 'hbtmp.hbs'), `my name is {{name}}`)

test('ejs engine', async () => {await mofast()
    .source('**', { baseDir: templateDir})
    .engine('ejs', { name: 'jack'}, '*.txt')
    .dest('./output', { baseDir: __dirname})
  const fileOutput = fs.readFileSync(path.resolve(__dirname, 'output/ejstmp.txt'), 'utf-8')
  expect(fileOutput).toBe(`my name is jack`)
})

test('handlebars engine', async () => {await mofast()
    .source('**', { baseDir: templateDir})
    .engine('handlebars', { name: 'jack'}, '*.hbs')
    .dest('./output', { baseDir: __dirname})
  const fileOutput = fs.readFileSync(path.resolve(__dirname, 'output/hbtmp.hbs'), 'utf-8')
  expect(fileOutput).toBe(`my name is jack`)
})

test('babel', async () => {await mofast()
    .source('**', { baseDir: templateDir})
    .babel()
    .dest('./output', { baseDir: __dirname})
  const fileOutput = fs.readFileSync(path.resolve(__dirname, 'output/add.js'), 'utf-8')
  expect(fileOutput).toBe(`var add = function (a, b) {return a + b;}`)
})

engine()有三个参数

  • type: 指定模板类型
  • locals：提供输入的参数
  • patterns: 指定匹配格式

babel()有一个参数

  • patterns: 指定匹配格式

engine() 实现原理：

通过 nodejs 的assert，确保 type 为ejs和 handlebars 之一

通过 jstransformer+jstransformer-ejs 和jstransformer-handlebars

判断 locals 的类型，如果是函数，则传入执行上下文，使得可以访问 files 和 meta 等值。如果是对象，则把 meta 值合并进去。

使用minimatch，匹配文件名是否符合给定的pattern，如果符合，则进行处理。如果不输入pattern，则处理全部文件。

创立一个中间件，在中间件中遍历 files，将单个文件的 contents 取出来进行处理后，更新到原来位置。

将中间件推入数组

babel()实现原理

通过 nodejs 的assert，确保 type 为ejs和 handlebars 之一

通过 buble 包（简化版的 bable），进行转换代码转换。

使用 minimatch，匹配文件名是否符合给定的pattern，如果符合，则进行处理。如果不输入pattern，则处理所有js 和jsx文件。

创立一个中间件，在中间件中遍历 files，将单个文件的 contents 取出来转化为 es5 代码后，更新到原来位置。

接下来，安装依赖

yarn add jstransformer jstransformer-ejs jstransformer-handlebars minimatch buble

并在头部进行引入

src/index.js

import assert from 'assert'
import transformer from 'jstransformer'
import minimatch from 'minimatch'
import {transform as babelTransform} from 'buble'

补充 engine 和 bable 方法

  engine (type, locals, pattern) {const supportedEngines = ['handlebars', 'ejs']
    assert(typeof (type) === 'string' && supportedEngines.includes(type), `engine must be value of ${supportedEngines.join(',')}`)
    const Transform = transformer(require(`jstransformer-${type}`))
    const middleware = context => {
      const files = context.files

      let templateData
      if (typeof locals === 'function') {templateData = locals(context)
      } else if (typeof locals === 'object') {templateData = { ...locals, ...context.meta}
      }

      for (let filename in files) {if (pattern && !minimatch(filename, pattern)) continue
        const content = files[filename].contents.toString()
        files[filename].contents = Buffer.from(Transform.render(content, templateData).body)
      }
    }
    this.middlewares.push(middleware)
    return this
  }

  babel (pattern) {pattern = pattern || '*.js?(x)'
    const middleware = (context) => {
      const files = context.files
      for (let filename in files) {if (pattern && !minimatch(filename, pattern)) continue
        const content = files[filename].contents.toString()
        files[filename].contents = Buffer.from(babelTransform(content).code)
      }
    }
    this.middlewares.push(middleware)
    return this
  }

第七步：过滤文件

书写测试用例

test/index.spec.js

test('filter', async () => {const stream = mofast()
  stream.source('**', { baseDir: templateDir})
    .filter(filepath => {return filepath !== 'hbtmp.hbs'})

  await stream.process()

  expect(stream.fileList).toContain('add.js')
  expect(stream.fileList).not.toContain('hbtmp.hbs')
})

新增了一个 fileList 方法，可以从 this.files 中获取到全部的文件名数组。

依然，通过注入中间件的方法，创建 filter()方法。

src/index.js

  filter (fn) {const middleware = ({files}) => {for (let filenames in files) {if (!fn(filenames, files[filenames])) {delete files[filenames]
        }
      }
    }
    this.middlewares.push(middleware)
    return this
  }

  get fileList () {return Object.keys(this.files).sort()}

跑一下yarn test, 通过测试

第八步：打包发布

这时，基本上一个小型构建工具的全部功能已经实现了。

这时输入yarn lint 统一文件格式。

再输入 yarn build 打包文件，这时出现 dist/index.js 即是 npm 使用的文件

在 package.json 中增加 main 字段，指向dist/index.js

增加 files 字段，指示 npm 包仅包含 dist 文件夹即可

  "main": "dist/index.js",
  "files": ["dist"],

然后使用

npm publish

即可将包发布在 npm 上。

总结：

好了，回答最开始的问题：

什么是链式操作？

答：返回 this

什么是中间件机制

答：就是将一个个异步函数推入堆栈，最后遍历执行。

如何读取、构建文件树。

答：文件树，就是 key 为文件相对路径，value 为文件内容等信息的对象 this.files。

读取文件树，就是取得相对路径数组后，采用 Promise.all 批量 fs.readFile 取文件内容后挂载到 this.files 上去。

构建文件树，就是 this.files 采用 Promise.all 批量 fs.writeFile 到目标文件夹。

如何实现模板渲染、代码转译？

答：就是从文件树上取出文件，ejs.render()或 bable.transform()之后放回原处。

如何实现中间件间数据共享？

答：contructor 中创建 this.meta={}即可。

其实，前端构建工具背后的原理，远比想像中更简单。

正文完
cli gulp node.js
发表至： javascript
2019-05-23
 0
关于javascript:Js-异步处理演进CallbackPromiseObserver
关于javascript:数独游戏的前端实现
关于javascript:Jsp语法及指令
关于javascript:图片明水印生成方法