这次给大家带来自定义搭建前端脚手架，自定义搭建前端脚手架的注意事项有哪些，下面就是实战案例，一起来看一下。
做新的项目时，每次复制文件夹，然后修改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-clicd x-build-clinpm 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 nodeconst 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可以很轻松的就做到，这里发展空间很大，就不再多说。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Component与PureComponent使用区别详解
css常用样式总结
以上就是自定义搭建前端脚手架的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2757852.html
