Home > Web Front-end > JS Tutorial > body text

Customize front-end scaffolding

php中世界最好的语言
Release: 2018-05-24 15:53:45
Original
2306 people have browsed it

This time I will bring you a custom build of front-end scaffolding. What are the precautions for custom build of front-end scaffolding? The following is a practical case, let's take a look.

When working on a new project, every time I copy the folder and then modify package.json, README.md, etc., it feels very "elegant". If I want to use something like

vue-cli, use vue init downloaded my own front-end project from github, which looks very "elegant". If you think it looks good, please star >>> x-build-cli.

Initialize the projectStructure

First of all, you already have a front-end project you built yourself, assuming it is named x-build and has been uploaded to github.

At this time, create a new project and name it

x-build-cli. I refer to vue’s approach, so that even if x-build is updated, x-build-cli is not updated, you can also pull the latest x-build.

mkdir x-build-cli
cd x-build-cli
npm init
Copy after login
Create a folder named

x-build-cli, initialize it using npm, create a bin directory inside the folder, and create x- build.js, the project structure at this time:

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json
Copy after login
Configure package.json

"bin": {
  "x-build": "./bin/x-build.js"
}
Copy after login

Add "bin" to package.json, "x-build" is the command number to enter command, "./bin/x-build.js" is the file when the command is executed.

Configuration 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');
Copy after login

#! /usr/bin/env node specifies that this file is executed using node.

Modules that need to be installed npm i commander download-git-repo chalk ora --save:

commander can parse the commands entered by the user.

download-git-repo Pull the files on github.

chalkChange the color of the output text

oraSmall icons (loading, succeed, warn, etc.)

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

-i is an abbreviation, similar to the [name after npm i -g

init ]can be obtained through program.init.

The last item is the description, which will usually be prompted in

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{
      // 可以输出一些项目失败的信息
    }
  })
}
Copy after login

ora().start()You can create one loading small icon. >>> For other icons, refer to ora

download() to download the project we need from github. Because we are using a branch, we added

#x-build4.1 at the end. , the default is master. ParametersConfiguration referencedownload-git-repo

chalk.blueBright() will convert the output text into blue. >>> For other colors, please refer to chalk

Upload to npm

Students who do not have an account can go to npm to register an account.

// 登录账号
npm login
// 上传项目
npm publish
Copy after login
After the upload is successful, install it into the global environment through npm install x-build-cli -g.

Use

build init [project name] to pull the corresponding files from github.

Optimization

The downloaded file at this time is consistent with github. I want to change package.json, change

name to the initialized project name, and change versionChanged to 1.0.0.

At this time, you can use node's own api to do it:

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;
  })
});
Copy after login
Read the file through readFile

, writeFile to write the file, be careful to pass it in when writing StringJSON.stringify(_data, null, 4), this way you can output a formatted json file. It can be done easily through node. There is a lot of room for development here, so I won’t say more.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the difference between Component and PureComponent


Summary of commonly used css styles

The above is the detailed content of Customize front-end scaffolding. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!