用Vue-cli源码解读React业务脚手架实战（二）：项目构建及服务（create）

2024-01-03 15:01:52

React业务脚手架实战（二）：项目构建及服务（create）

项目构建及服务（create）

今天我们来写个create的命令, 我们先写个简单的脚手架构建脚本, 这个脚本最基本的功能就是, 在一个叫xx-project的目录下创建package.json文件和main.js文件, 然后在package.json中安装最基本的依赖

const fs = require('fs')
const path = require('path')
module.exports = function(name, options){
    // 定义目录路径
    const root = path.join(process.cwd(), name)
    // 写入package.json文件
    const packageJson = {
        "name": name,
        "version": "1.0.0",
        "description": "",
        "main": "main.js",
        "scripts": {
            "start": "node main.js"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
            "express": "^4.17.1"
        }
    }
    fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson, null, 2))
    // 写入main.js文件
    const mainJs = `console.log('hello world');`
    fs.writeFileSync(path.join(root, 'main.js'), mainJs)
}

写好后在终端执行 npm link 把当前目录下的脚手架链接到全局,然后我们在项目里面使用create命令进行创建,如下:

// package.json
{
  "scripts":{
    "create": "xx-cli create xxx",
    "start": "node main.js"
  }
}

在终端执行npm run create xxx就可以创建项目, 但是此时代码一直报错, 终端的提示是: xxx@1.0.0 start: node main.js 不是内部或外部命令,也不是可运行的程序或批处理文件。

可以看到main文件里面写的 main.js 文件在执行命令的时候并没有被找到, 这是因为项目在执行的时候, 会先找到项目根目录下的node_modules文件夹, 然后查找main.js文件执行, 并没有去当前项目目录下查找, 而对于我们自己的脚手架来说, main.js是放在脚手架的目录下, 为了解决这个问题, 在安装依赖时添加安装参数 --save-exact, 如下:

  "dependencies": {
      "express": "^4.17.1"
  },
  "devDependencies": {
      "xx-cli": "1.0.0" // --save-exact
  }

再次执行终端命令, 项目就可以成功运行了。

// main.js
console.log('hello world');

通过上面的例子可以发现, 构建项目的脚手架命令主要做的以下几件事情:

创建项目目录, 在终端执行脚手架的create命令时, 会先创建一个项目目录。
安装依赖, 利用脚手架命令在项目的package.json中, 安装对应的依赖库。
创建项目文件, 构建脚手架命令, 会在项目根目录下创建一些基本文件, 如package.json、 main.js等。

下面我们通过修改create命令的脚手架函数, 来实现一个更复杂的构建过程。

// create.js
const fs = require('fs')
const path = require('path')
const download = require('download-git-repo')
module.exports = function(name, options){
  // 定义目录路径
  const root = path.join(process.cwd(), name)
  // 创建项目目录
  fs.mkdirSync(root)
  // 下载项目模板
  download('github:some-org/some-repo', root, function(err) {
      console.log(err ? 'Error' : 'Success')
  })
}