从零开发一个前端脚手架-一一网

阅读本文需要一定的 node 基础，最好了解或者使用过 rollup。
本文将会从零出发，实现一个可以帮我们创建 vue 和 react 项目的简单脚手架，介绍脚手架开发的过程。

我们为什么需要开发脚手架

前端开发的过程中我们需求做一些流程化、重复的一些东西，比如可能我们需要在创建 vue 项目之后加入我们自己公司最新的 eslint 配置，也可能需要给老旧的项目添加 eslint 配置。但是如果需要给每一个项目手动添加上 eslint 配置还是一件很麻烦的事情，这个时候就需要开发一个脚手架去帮我们做这些重复的事情。

我们希望实现的效果

控制台输入 createProject vue 然后输入项目名称，自动使用 @vue/cli ，控制台输入 createProject react 然后输入项目名称，自动使用 create-react-app 创建项目。

代码链接

码云：gitee.com/jiangxiZhan…

rollup 搭建项目框架

主要目录文件

bin 
    --index.js
dist 
src
    tasks
        -- create.js // 执行创建任务的代码
    --index.js // 入口文件
.gitignore
package.json
rollup.config.js
复制代码

我们在 src 下面的 index.js 里面开发我们的代码，而把编译解析后的生产文件放在 dist 目录下面

rollup主要配置

export default [{
    input: './src/index.js',
    output: {
        file: './dist/index.js',
        format: 'cjs'
    },
    sourceMap: true
}];
复制代码

配置 npm run dev 命令用来热更新我们的代码

"dev": "rollup -c --watch --sourcemap"
复制代码

配置 npm run build 命令用来打包生产文件

"build": "rollup -c"
复制代码

配置 createProject 命令

我们希望输入 createProject 命令的时候控制台可以输出src/index.js里面的内容 ‘hello 01’

src/index.js 文件

console.log('hello 01');
复制代码

package.json 文件，配置字段 bin 字段

"bin": {
    "createProject": "./bin/index.js"
}
复制代码

如果我们全局下载一个 npm 包，那么 nodejs 将会自动解析里面的 bin 字段，并把里面的 key 加入到命令。

比如说我们全局安装的 @vue/cli 命令，@vue/cli 的 package.json 中有一个 bin 字段，该字段有一个名为 vue 的 key，全局安装之后，我们可以看到在node安装目录下出现一个 vue.cmd 的一个文件，这也是我们为什么可以使用 vue 命令创建项目的原因。

配置过后，如果我们安装该包，就可以生成 createProject 命令

bin/index.js文件

#!/usr/bin/env node
require('../dist/index.js')
复制代码

#!/usr/bin/env node 文件开头就是告诉这个文件，在环境变量中查找 node 并且用 node 去执行这个文件

发布 createProject 命令到全局

在项目目录下使用 npm link 命令把 createProject 发布到全局。

命令执行成功之后 node 安装目录下面的 node_modules 下面就会有 create-vue-react-project 这个 npm 包。link 命令相当于在 node 里面生成一个软连接，指向实际的项目，这样实际项目文件改变以后 node 安装目录 node_modules 里面的引用包也会改变，方便调试。

发布成功之后，可以在全局任何地方打开控制台，都可以使用该命令。

发布成功之后的实际效果

我们运行 npm run dev
createProject 效果

3. 修改 src/index.js

console.log('hello 02')
复制代码

再次执行 createProject

可以看到命令已经执行成功，并且我们修改文件以后，命令可以感知到

完成创建 vue 和 react 项目功能

使用 commander 模块接受命令

commander 是一个提供了用户命令行输入和参数解析强大功能的包，我们用它来解析我们出入的命令，安装该包后即可使用

src/index.js

import { program } from 'commander';
program
    .command('vue')
    .action((type) => {
        console.log('vue',123);
    })

program
    .command('react')
    .action((type) => {
        console.log('react',123);
    })

program.parse(process.argv)

复制代码

这样当我们输入 createProject vue 就会输出 ‘vue 123’,输入createProject react 就会输出 ‘react 123’

调用 @vue/cli 提供的 vue 命令

首先需要用户输入一个项目名称,我们引入 prompts 让用户输入项目名称

// src/tasks/create.js 文件
const response = await prompts([
    {
        type: 'text',
        name: 'name',
        message: '请输入项目名称: '
    }
]);
复制代码

得到项目名称以后直接调用脚手架中的 @vue/cli 提供的命令，这意味着我们需要把 @vue/cli 加入项目依赖

// src/tasks/create.js 文件
const cliPath = path.resolve(__dirname, '../');
const vueInit = spawn.sync(path.resolve(cliPath, './node_modules/.bin/vue'), ['create', projectName], { stdio: 'inherit' });
if (vueInit.error) {
    // 抛错终止程序
    throw new Error(vueInit.error);
}

复制代码

最后完整的代码

// src/tasks/create.js 文件
import path from 'path';
import prompts from 'prompts';
import spawn from 'cross-spawn';

export default async function createProject(type) {
    const response = await prompts([
        {
            type: 'text',
            name: 'name',
            message: '请输入项目名称: '
        }
    ]);
    if (!response.name) {
        await createProject(type);
    }
    create(response.name, type)
    return response.name;

}

function create(projectName,type) {
    const cliPath = path.resolve(__dirname, '../');
    if (type === 'vue') {
        const vueInit = spawn.sync(path.resolve(cliPath, './node_modules/.bin/vue'), ['create', projectName], { stdio: 'inherit' });
        if (vueInit.error) {
            // 抛错终止程序
            throw new Error(vueInit.error);
        }
    } else {
        const reactInit = spawn.sync(path.resolve(cliPath, './node_modules/.bin/create-react-app'), [projectName], { stdio: 'inherit' });
        if (reactInit.error) {
            // 抛错终止程序
            throw new Error(reactInit.error);
        }
    }
    
}

复制代码