阅读 674

从零开发一个前端脚手架

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

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

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

我们希望实现的效果

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

代码链接

  1. 码云: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 里面的引用包也会改变,方便调试。

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

发布成功之后的实际效果
  1. 我们运行 npm run dev
  2. createProject 效果

image 3. 修改 src/index.js

console.log('hello 02')
复制代码
  1. 再次执行 createProject

image

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

完成创建 vue 和 react 项目功能

使用 commander 模块接受命令

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

  1. 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'

image

调用 @vue/cli 提供的 vue 命令
  1. 首先需要用户输入一个项目名称,我们引入 prompts 让用户输入项目名称
// src/tasks/create.js 文件
const response = await prompts([
    {
        type: 'text',
        name: 'name',
        message: '请输入项目名称: '
    }
]);
复制代码
  1. 得到项目名称以后直接调用脚手架中的 @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);
}

复制代码
  1. 最后完整的代码
// 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);
        }
    }
    
}

复制代码
运行效果

image

上传到 npm

  1. 执行 npm run build
  2. www.npmjs.com/ 上创建账号。
  3. npm login 登录账号
  4. 执行 npm publish ,执行完毕之后就可以就发布完成了

快去创建你自己的脚手架吧

文章分类
前端
文章标签