实现create-osdoc-app脚手架

w候人兮猗

发布于 2020-07-01 16:55:18

5490

发布于 2020-07-01 16:55:18

文章被收录于专栏：w候人兮猗的博客

介绍

好久没更新了，最近一直忙于业务开发，没有多少时间学习自己的东西，抽着某天晚上的功夫写了一个脚手架，其实就是一个简单的node脚本。

我们知道，在小公司很少有时间有精力从0到1基于webpack去封装一个类似于create-react-app、vue-cli、UmiJs之类的脚手架，更多的是我们基于上述的轮子二次封装服务于我们实际业务的应用模板。

这样做的话，我们可以依次封装我们的业务模板，比如我自己在公司业务基础上，封装了三个业务模板，分别是：

fast_h5_umi 基于 Typescript+React+Umi3.x+antd-mobile 构建的通用H5模板。
fast_h5_vue 基于 vue +vuex-cli3+vuex+vue-router+vant 构建的通用H5模板。
fast_react_native 基于 react-native+dvajs+antd-mobile-rn+react-navigation@5.x+axios+Typescript 开发的通用react-native模板

这样做的话，以后我们有相应的项目都可以直接复制粘贴开始改起来，大大提高我们的开发效率

但是这样的话我们还得去手动的去记录每个项目的地址，这样是很不方便的，这时候我们就想到是否可以搞一个类似于create-umi那样的脚手架，全局安装之后初始化项目，可以根据选项生成不同的内容。

开始

发现问题之后就要解决问题，在阅读UmiJs的脚手架工具create-umi的源码之后，可以看出其实就是利用npm的bin字段，向全局注册一个命令，这个命令就可以使用。

比如如下代码：

// package.json

{
    "bin": {
        "create-osdoc-app": "cli.js"
    },
}

注册了这样一个命令，其中的create-osdoc-app就是全局需要使用的命令,对应的cli.js是本地的一个文件。我们可以在这个文件中相应的处理。

// cli.js

// 查看版本

if (args.v || args.version) {
  console.log('version', chalk.blue(package.version));
  if (existsSync(join(__dirname, '.debug'))) {
    // 如果是本地调试会打印 @debug
    console.log(chalk.cyan('@debug'));
  }
  process.exit(0);
}

if (!semver.satisfies(process.version, '>= 8.0.0')) {
  console.error(chalk.red('✘ The generator will only work with Node v8.0.0 and up!'));
  process.exit(1);
}

// 取默认应用名
const name = args._[0] || '';

(async () => {
  await runCli({
    name,
    args,
  });
  process.exit(0);
})();

通过简单的校验之后，我们会执行一个runCli方法，参数是我们执行命令的时候携带的参数

具体的runCli可以查看该文件 https://github.com/osdoc-dev/create-osdoc-app/blob/master/lib/run.js

使用

将脚手架推送至npm之后，我们就可以安装并且使用它了。

全局安装 create-osdoc-app

$ npm install create-osdoc-app -g

安装后执行如下命令

$ create-osdoc-app [appName]

$ create-osdoc-app

? ? 请输入应用名称 (new-app)?
new-app-demo

? ? 请选择应用模板 (Use arrow keys)
> fast_h5_umi    - 基于umi3.x+typescript+antd-mobile 构建h5模板
  fast_h5_vue    - vue +vue-cli3+vuex+vue-router+vant 快速开发 h5模板
  fast_react_native  - 基于 react-native+dvajs+antd-mobile-rn+react-navigation@5.x+axios+typescript 开发的通用react-native

Cloning into 'new-app'...
remote: Enumerating objects: 123, done.
remote: Counting objects: 100% (123/123), done.
remote: Compressing objects: 100% (111/111), done.
Receiving objects:  22% (28/123),
Receiving objects: 100% (123/123), 99.90 KiB | 7.00 KiB/s, done.
Resolving deltas: 100% (4/4), done.
> ? clone success
? Copied to clipboard, just use Ctrl+V
✨ File Generate Done

执行完相应的命令之后，我们会将模板clone至本地，我们就可以进行开发了。

后期我们还可以增加本地化的一些操作，比如现在是内置的一些模板，我们可以通过脚手架去下载指定的模板，或者通过脚手架帮助我们去创建一个组件之类的东西，这些都是可以的。