vee-cli脚手架实践(下)

前端 | vee-cli脚手架实践(下).png

前言

书接上回 vee-cli脚手架实践(中)

上回主要介绍了create.js脚本的模板选择与拉取，本篇旨在讲述选择对应模板后编译以及最后的npm发包

模板编译

依赖包

图片

[包目录结构]

• metalsmith (用于遍历文件夹，判断是否需要进行模板渲染)
• consolidate (统一所有的模板引擎)

[目录描述] 对于有模板引擎渲染的仓库，一般会有一个ask.js，

module.exports = [
    {
      type: 'confirm',
      name: 'private',
      message: 'ths resgistery is private?',
    },
    {
      type: 'input',
      name: 'author',
      message: 'author?',
    },
    {
      type: 'input',
      name: 'description',
      message: 'description?',
    },
    {
      type: 'input',
      name: 'license',
      message: 'license?',
    },
  ]

与用户进行命令行交互后，将对应的内容动态注入到模板中，这里常用的模板引擎有ejs、handlebars等，consolidate将这里用到的引擎进行了统一，可以自由选择

逻辑代码

// 判断是否存在ask.js文件
if(!fs.existsSync(path.join(result, 'ask.js'))) {
    // 直接下载
    await ncpPro(result, path.resolve(projectName));
} else {
    // 模板渲染后再拷贝
    await new Promise((resolve,reject) => {
      MetalSmith(__dirname)
        .source(result)
        .destination(path.resolve(projectName))
        .use(async (files, metal, done) => {
            const a = require(path.join(result, 'ask.js'));
            const r = await Inquirer.prompt(a);
            const m = metal.metadata();
            Object.assign(m, r);
            delete files['ask.js'];
            done()
        })
        .use((files, metal, done) => {
            const meta = metal.metadata();
            Object.keys(files).forEach(async (file) => {
                let c = files[file].contents.toString();
                // 只有js和json文件才去做处理
                if(file.includes('js') || file.includes('json')) {
                    // 判断是否是模板 可用正则匹配
                    if(c.includes('<%')) {
                        c = await renderPro(c, meta);
                        files[file].contents = Buffer.from(c);
                    }
                }
            })
            done()
        })
        .build((err) => {
            if(err) {
                reject()
            } else {
                resolve()
            }
        })
    })
}

这里主要是对之前直接down仓库内容复制做了扩展，判断是否需要进行模板编译，也就是用户是否需要再次输入内容，动态的注入到拉取的模板中，这里还可以选择更多的其他配置，但大致原理基本一致，具体详细的可以参看vue-cli源码，其中对其他部分也做了更为详尽的扩展

相关包源码分析

metalsmith

var assert = require('assert')
var clone = require('clone')
var fs = require('co-fs-extra')
var matter = require('gray-matter')
var Mode = require('stat-mode')
var path = require('path')
var readdir = require('recursive-readdir')
var rm = require('rimraf')
var thunkify = require('thunkify')
var unyield = require('unyield')
var utf8 = require('is-utf8')
var Ware = require('ware')

readdir = thunkify(readdir)
rm = thunkify(rm)


var isBoolean = function(b) {return typeof b === 'boolean'}
var isNumber  = function(n) {return typeof n === 'number' && !Number.isNaN(n)}
var isObject  = function(o) {return o !== null && typeof o === 'object'}
var isString  = function(s) {return typeof s === 'string'}

module.exports = Metalsmith


function Metalsmith(directory){
  if (!(this instanceof Metalsmith)) return new Metalsmith(directory)
  assert(directory, 'You must pass a working directory path.')
  this.plugins = []
  this.ignores = []
  this.directory(directory)
  this.metadata({})
  this.source('src')
  this.destination('build')
  this.concurrency(Infinity)
  this.clean(true)
  this.frontmatter(true)
}

Metalsmith.prototype.use = function(plugin){
  this.plugins.push(plugin)
  return this
}


Metalsmith.prototype.directory = function(directory){
  if (!arguments.length) return path.resolve(this._directory)
  assert(isString(directory), 'You must pass a directory path string.')
  this._directory = directory
  return this
}


Metalsmith.prototype.metadata = function(metadata){
  if (!arguments.length) return this._metadata
  assert(isObject(metadata), 'You must pass a metadata object.')
  this._metadata = clone(metadata)
  return this
}


Metalsmith.prototype.source = function(path){
  if (!arguments.length) return this.path(this._source)
  assert(isString(path), 'You must pass a source path string.')
  this._source = path
  return this
}

Metalsmith.prototype.destination = function(path){
  if (!arguments.length) return this.path(this._destination)
  assert(isString(path), 'You must pass a destination path string.')
  this._destination = path
  return this
}

Metalsmith.prototype.concurrency = function(max){
  if (!arguments.length) return this._concurrency
  assert(isNumber(max), 'You must pass a number for concurrency.')
  this._concurrency = max
  return this
}

Metalsmith.prototype.clean = function(clean){
  if (!arguments.length) return this._clean
  assert(isBoolean(clean), 'You must pass a boolean.')
  this._clean = clean
  return this
}

Metalsmith.prototype.frontmatter = function(frontmatter){
  if (!arguments.length) return this._frontmatter
  assert(isBoolean(frontmatter), 'You must pass a boolean.')
  this._frontmatter = frontmatter
  return this
}

Metalsmith.prototype.ignore = function(files){
  if (!arguments.length) return this.ignores.slice()
  this.ignores = this.ignores.concat(files)
  return this
}

Metalsmith.prototype.path = function(){
  var paths = [].slice.call(arguments)
  paths.unshift(this.directory())
  return path.resolve.apply(path, paths)
}

Metalsmith.prototype.build = unyield(function*(){
  var clean = this.clean()
  var dest = this.destination()
  if (clean) yield rm(path.join(dest, '*'), { glob: { dot: true } })

  var files = yield this.process()
  yield this.write(files)
  return files
})

Metalsmith.prototype.process = unyield(function*(){
  var files = yield this.read()
  files = yield this.run(files)
  return files
})

Metalsmith.prototype.run = unyield(function*(files, plugins){
  var ware = new Ware(plugins || this.plugins)
  var run = thunkify(ware.run.bind(ware))
  var res = yield run(files, this)
  return res[0]
})

Metalsmith.prototype.read = unyield(function*(dir){
  dir = dir || this.source()
  var read = this.readFile.bind(this)
  var concurrency = this.concurrency()
  var ignores = this.ignores || null
  var paths = yield readdir(dir, ignores)
  var files = []
  var complete = 0
  var batch

  while (complete < paths.length) {
    batch = paths.slice(complete, complete + concurrency)
    batch = yield batch.map(read)
    files = files.concat(batch)
    complete += concurrency
  }

  return paths.reduce(memoizer, {})

  function memoizer(memo, file, i) {
    file = path.relative(dir, file)
    memo[file] = files[I]
    return memo
  }
})

Metalsmith.prototype.readFile = unyield(function*(file){
  var src = this.source()
  var ret = {}

  if (!path.isAbsolute(file)) file = path.resolve(src, file)

  try {
    var frontmatter = this.frontmatter()
    var stats = yield fs.stat(file)
    var buffer = yield fs.readFile(file)
    var parsed

    if (frontmatter && utf8(buffer)) {
      try {
        parsed = matter(buffer.toString())
      } catch (e) {
        var err = new Error('Invalid frontmatter in the file at: ' + file)
        err.code = 'invalid_frontmatter'
        throw err
      }
      ret = parsed.data
      ret.contents = (Buffer.hasOwnProperty('from'))
        ? Buffer.from(parsed.content) 
        : new Buffer(parsed.content)
    } else {
      ret.contents = buffer
    }

    ret.mode = Mode(stats).toOctal()
    ret.stats = stats
  } catch (e) {
    if (e.code == 'invalid_frontmatter') throw e
    e.message = 'Failed to read the file at: ' + file + '\n\n' + e.message
    e.code = 'failed_read'
    throw e
  }

  return ret
})

Metalsmith.prototype.write = unyield(function*(files, dir){
  dir = dir || this.destination()
  var write = this.writeFile.bind(this)
  var concurrency = this.concurrency()
  var keys = Object.keys(files)
  var complete = 0
  var batch

  while (complete < keys.length) {
    batch = keys.slice(complete, complete + concurrency)
    yield batch.map(writer)
    complete += concurrency
  }

  function writer(key){
    var file = path.resolve(dir, key)
    return write(file, files[key])
  }
})

Metalsmith.prototype.writeFile = unyield(function*(file, data){
  var dest = this.destination()
  if (!path.isAbsolute(file)) file = path.resolve(dest, file)

  try {
    yield fs.outputFile(file, data.contents)
    if (data.mode) yield fs.chmod(file, data.mode)
  } catch (e) {
    e.message = 'Failed to write the file at: ' + file + '\n\n' + e.message
    throw e
  }
})

metalsmith用的是挂在原型上的写法，通过插件的链式传递方法进行数据的透传，属于原型设计模式的应用，对于js来说原型模式是天生存在的，因而对于希望通过链式传递且写法且变量不多的小型库而言，这种方式不失为一种好的方法，对链式调用有兴趣的同学可以研究下jQuery源码及koa源码，虽然大型库组织不是一种模式的展现，但是其中小部分还是有异曲同工的地方的，对于链式调用的实现方法也可以有一个横向的扩展和对比

consolidate

consolidate主要是对不同模板引擎的选择分发，这里挑选了最核心的几个功能函数

function cache(options, compiled) {
    
  if (compiled && options.filename && options.cache) {
    delete readCache[options.filename];
    cacheStore[options.filename] = compiled;
    return compiled;
  }

  if (options.filename && options.cache) {
    return cacheStore[options.filename];
  }

  return compiled;
}

function read(path, options, cb) {
  var str = readCache[path];
  var cached = options.cache && str && typeof str === 'string';

  if (cached) return cb(null, str);

  fs.readFile(path, 'utf8', function(err, str) {
    if (err) return cb(err);
    str = str.replace(/^\uFEFF/, '');
    if (options.cache) readCache[path] = str;
    cb(null, str);
  });
}

function readPartials(path, options, cb) {
  if (!options.partials) return cb();
  var keys = Object.keys(options.partials);
  var partials = {};

  function next(index) {
    if (index === keys.length) return cb(null, partials);
    var key = keys[index];
    var partialPath = options.partials[key];

    if (partialPath === undefined || partialPath === null || partialPath === false) {
      return next(++index);
    }

    var file;
    if (isAbsolute(partialPath)) {
      if (extname(partialPath) !== '') {
        file = partialPath;
      } else {
        file = join(partialPath + extname(path));
      }
    } else {
      file = join(dirname(path), partialPath + extname(path));
    }

    read(file, options, function(err, str) {
      if (err) return cb(err);
      partials[key] = str;
      next(++index);
    });
  }

  next(0);
}

function fromStringRenderer(name) {
  return function(path, options, cb) {
    options.filename = path;

    return promisify(cb, function(cb) {
      readPartials(path, options, function(err, partials) {
        var extend = (requires.extend || (requires.extend = require('util')._extend));
        var opts = extend({}, options);
        opts.partials = partials;
        if (err) return cb(err);
        if (cache(opts)) {
          exports[name].render('', opts, cb);
        } else {
          read(path, opts, function(err, str) {
            if (err) return cb(err);
            exports[name].render(str, opts, cb);
          });
        }
      });
    });
  };
}

consolidate这个库也是tj大佬写的，其主要思路是通过读取[read]对应文件里的字符[readPartials]获取到需要的字符后对字符进行查找对应名称[fromStringRenderer]的渲染，其中读取过程做了[cache]优化，剩下的就是对对应的模板渲染引擎的分发，从而做到了汇聚分发的效果，整体思路还是很明确的，另外多说一句，tj大佬似乎对类生成器函数处理有种蜜汁喜爱，各种库都有它的影子，对生成器方式处理感兴趣的同学，可以参考co库源码

发包

连接npm

图片

连接npm源(如果没有nrm，需要npm i nrm -g) => 填写npm官网的个人用户信息

发布到npm

图片

对于整个npm发包等感兴趣的同学，可以参考npm文档，也可以参考这篇文章npm包的发布与删除

验证

图片

搜索npmjs官网上，可以查找到，npm unlink后或换一台机器，可以npm i vee-cli进行包下载，这样一个脚手架的发包就完成了

总结

脚手架是前端工程化领域的基本项，个人认为掌握前端脚手架的开发是十分重要的，这三篇内容
vee-cli脚手架实践(上)
vee-cli脚手架实践(中)
vee-cli脚手架实践(下)
旨在提供一个大概思路及样板，目前只包含了

1、命令行；2、模板拉取；

，其相对于成熟的脚手架如vue-cli、create-react-app、@angular/cli等来说，还有很多很多工作要做，包括

3、本地服务；4、打包构建；5、集成部署；6、周边其他

等都还需要完善，想要在工程化领域有所建树的同学，不妨在这几个方面多下下功夫

vee-cli源代码

参考

• metalsmith.js源码
• consolidate.js源码
• co.js源码
• jquery.js源码
• koa.js源码
• npm包可以修改名字吗？
• 用Angular脚手架搭建项目
• React（脚手架）
• co 函数库的含义和用法
• 有哪些好用的前端模板引擎？