从react-start到co源码(二)

2024年3月29日 204次阅读 来源: 2json

react作为当前非常盛行的前端框架，置信许多前端er都有捋臂张拳的进修它的主意。工欲善其事，必先利其器。这篇文章就简朴的给人人引见一下怎样我疾速的搭建一个react前端开辟环境。重要针对于react小白，大神不喜勿喷。
从题目能够看出，这里不会仅仅只引见一下react的开辟环境怎样搭建。我将这个系列分红三篇引见:

接下来就最先引见怎样去开辟一个简朴的react-start脚手架，从而一键天生react开辟环境。

目次构造

起首来看一下脚手架的目次构造，基本构造以下：

-bin
  |--reactGenerator
-commander
  |--init.js
-config.json
-package.json

bin/reactGenerator：定义基本的敕令

commander/init.js：定义敕令所对应的操纵

config.json：脚手架的一些设置文件

package.json：项目的包文件

项目依靠

从package.json文件中能够看出，项目的基本依靠重要有以下几个：

"dependencies": {
  "chalk": "^1.1.3",
  "co": "^4.6.0",
  "co-prompt": "^1.0.0",
  "commander": "^2.9.0",
  "ora": "^0.4.1"
}

chalk：给敕令行输出增加色彩

co：实行generator函数

co-prompt：用于敕令行交互

commander：定义敕令行操纵和实行指定的敕令

ora：一个很风趣的敕令行loading动画

定义敕令

敕令的基本定义重假如在reactGenerator中，相识该文件之前，请确保本身对commander这个库有基本的相识，不相识的同砚请自行前去github。
下面就是reactGenerator的完全内容：

#!/usr/bin/env node

const program = require('commander')
const package = require('../package')

// 定义版本号
program.version(package.version)

// 定义运用的要领
program.usage('<command>')

// 定义脚手架的初始化事情
program
  .command('init')
  .alias('i')
  .description('generator a react project')
  .action(() => {
    require('../commander/init')()
  })

// 剖析参数
program.parse(process.argv)

// 假如没有输入敕令 显现协助的内容
if (!program.args.length) {
  program.help()
}

在这个文件中我们只定义一个init操纵，当我们全局装置脚手架东西的时刻，我们就能够经由过程以下敕令建立我们的项目。

react-to-start init 或许 react-to-start i

个中react-to-start是你在package.json的bin字段中指定的。

"bin": {
  "react-to-start": "bin/reactGenerator"
}

初始化项目

初始化项目重要运用的是init敕令，这个敕令的基本定义以下：

const co = require('co')
const chalk = require('chalk')
const prompt = require('co-prompt')
const ora = require('ora')
const fs = require('fs')
const exec = require('child_process').exec
const config = require('../config.json')

const init = () => {
  co(function* () {
    let templateName = yield prompt('what is your template name?  ')
    let projectName =  yield prompt('what is your project name?  ')
    let branchesName = config.branchesName

    if (!branchesName.includes(templateName)) {
      process.stdout.write(chalk.red(`\n ${templateName} does not exit, you can choose one of the template  listed below`))
      branchesName.forEach((name, index) => {
        process.stdout.write(chalk.green(` \n ${index + 1}. ${name} \n`))
      })
      process.exit(1)
    }

    // 假如说有对应的template 拼接git url举行下载
    let git = ''

    fs.exists('./.git', function(exists) {
      if (exists) {
        git = `git clone ${config.templateUrl} ${projectName} && cd ${projectName} && git checkout ${templateName}`
      } else {
        git = `git init && git clone ${config.templateUrl} ${projectName} && cd ${projectName} && git checkout ${templateName}`
      }

      // 运用 ora 打印出 loading + log
      let spinner = ora(`is downloading the template for ${templateName}...`)
      // 最先 loading 动画
      spinner.start()

      exec(git, (error, stdout, stderr) => {
        spinner.stop()
        if (error) {
          console.log(error)
          process.exit()
        }
        process.stdout.write(chalk.green('\n $$$ Generation completed! To use step by step as following: '))
        process.stdout.write(chalk.green(`\n 1. cd ${projectName} `))
        process.stdout.write(chalk.green(`\n 2. npm install \n`))
        process.exit(0)
      })
    })
  })
}

module.exports = init

这个初始化敕令的定义非常简朴，有点nodejs基本且相识co的同砚都邑很轻松的读懂，这里就不在多述(伤风好难熬痛苦的说)。

脚手架设置

脚手架所对应的模板目次就是在上篇文章中所讲的内容，不相识的同砚请戳从react-start到co源(一)以下就是设置文件：

{
  "templateUrl": "https://github.com/pavoooo/template.git",
  "branchesName": ["react"]
}

templateUrl就是模板地点(暂存在我的github上)，branchesName就是项目的称号，在github中以分支示意。

以上就是脚手架的基本架构，有点头晕，有的处所写的能够有点粗拙。有疑问的同砚迎接留言或许到我的github提issue。晚安。

    原文作者：2json
    原文地址: https://segmentfault.com/a/1190000008129293
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞