资讯专栏INFORMATION COLUMN

搭建自己的脚手架—“优雅”生成前端工程

luzhuqun / 3035人阅读

摘要:我平时工作会做移动端多一些,所以我通过搭建了自己的前端工程,主要是编译,自适应解决方案,还有一些自己写的一些插件。初始化项目结构首先你已经有了自己搭建的前端工程,假设起名为,并且已经上传到。

我平时工作会做移动端H5多一些,所以我通过webpack搭建了自己的前端工程(x-build),主要是编译stylus、jade、es6,自适应解决方案,还有一些自己写的一些插件。

做新的项目时,每次复制文件夹,然后修改package.json、README.md等,感觉很不“优雅”,想使用类似vue-cli,使用vue init的方式在github下载我自己的前端工程,这样显得很“优雅”。如果您觉得还不错,请star >>> x-build-cli。

初始化项目结构

首先你已经有了自己搭建的前端工程,假设起名为x-build,并且已经上传到github。

此时新建一个新的项目,起名为x-build-cli,我是参考vue的做法,这样即使x-build更新,x-build-cli不更新,也可以拉取到最新的x-build

mkdir x-build-cli
cd x-build-cli
npm init

创建名为x-build-cli的文件夹,使用npm初始化,在文件夹内创建bin目录,并创建x-build.js,此时的项目结构:

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json
配置package.json
"bin": {
  "x-build": "./bin/x-build.js"
}

在package.json增加"bin","x-build"就是命令号要输入的指令,"./bin/x-build.js"是命令执行时的文件。

配置x-build.js
#! /usr/bin/env node

const program = require("commander");
const download = require("download-git-repo");
const chalk = require("chalk");
const ora = require("ora");

#! /usr/bin/env node是指定这个文件使用node执行。

需要安装的模块npm i commander download-git-repo chalk ora --save:

commander可以解析用户输入的命令。

download-git-repo拉取github上的文件。

chalk改变输出文字的颜色

ora小图标(loading、succeed、warn等)

program
  .version("0.1.0")
  .option("-i, init [name]", "初始化x-build项目")
  .parse(process.argv);

.option()

-i 是简写,类似于npm i -g

init后面的[name]可以通过program.init来获取到。

最后一项是描述,一般会在x-build -h提示

if (program.init) {
  const spinner = ora("正在从github下载x-build").start();
  download("codexu/x-build#x-build4.1", program.init, function (err) {
    if(!err){
      // 可以输出一些项目成功的信息
      console.info(chalk.blueBright("下载成功"));
    }else{
      // 可以输出一些项目失败的信息
    }
  })
}

ora().start()可以创建一个loading小图标。 >>> 其他图标参考ora

download()从github下载我们需要的项目,因为使用的是分支所以在后面加上了#x-build4.1,默认是master。 参数配置参考download-git-repo

chalk.blueBright()会将输出的文字转化为蓝色。 >>> 其他颜色参考chalk

上传npm

没有账号的同学去npm注册一个账号。

// 登录账号
npm login
// 上传项目
npm publish

上传成功之后,通过npm install x-build-cli -g安装到全局环境中。

使用build init [项目名]就可以从github拉取相应的文件。

优化

此时下载的文件与github一致,我想改变package.json,将name改为初始化的项目名,将version改为1.0.0。

此时就使用node自己的api就可以做到:

const fs = require("fs");

fs.readFile(`${process.cwd()}/${program.init}/package.json`, (err, data) => {
  if (err) throw err;
  let _data = JSON.parse(data.toString())
  _data.name = program.init
  _data.version = "1.0.0"
  let str = JSON.stringify(_data, null, 4);
  fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) {
    if (err) throw err;
  })
});

通过readFile读取文件,writeFile写入文件,写入时注意要传入字符串JSON.stringify(_data, null, 4),通过这样的方式可以输出格式化的json文件。

通过node可以很轻松的就做到,这里发展空间很大,就不再多说。

结语

如果有不清楚的小伙伴请在Issues留言,更希望大家可以在我的github点一颗宝贵的star。

其他文章推荐

x-loader.js图片加载loading控制ES6插件

rem自适应解决方案·px2rem-loader&hotcss

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95181.html

相关文章

  • 从零开始搭建自己前端手架(一)

    摘要:以下阅读将花费分钟前言日常开发中,我们都只专注在业务上的开发,拿起一套开箱即用的模板项目就直接开搞了,不知道大家有没有思考过,平时我们使用的脚手架里面到底做了什么,并且如果是自己来搭一套脚手架,应该怎么去搭呢在本博客中,将记录作者搭建脚手架 (以下阅读将花费10分钟) 前言 日常开发中,我们都只专注在业务上的开发,拿起一套开箱即用的模板项目就直接开搞了,不知道大家有没有思考过,平时我们...

    gxyz 评论0 收藏0
  • vue项目搭建以及全家桶使用详细教程

    摘要:前言是现阶段很流行的前端框架,很多人通过官方文档的学习,对的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程对 前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎...

    simon_chen 评论0 收藏0
  • vue项目搭建以及全家桶使用详细教程

    摘要:前言是现阶段很流行的前端框架,很多人通过官方文档的学习,对的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程对 前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎...

    curlyCheng 评论0 收藏0
  • vue项目搭建以及全家桶使用详细教程

    摘要:前言是现阶段很流行的前端框架,很多人通过官方文档的学习,对的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程对 前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎...

    xi4oh4o 评论0 收藏0

发表评论

0条评论

luzhuqun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<