Initializing the project structure in the front-end project

This time I will bring you theinitialization projectstructure in the front-end project. What are theprecautionsfor initializing the project structure in the front-end project? The following is a practical case, let’s take a look.

I usually work on mobile H5, so I built my own front-end project (x-build) through webpack, mainly compiling stylus, jade, es6, adaptive solutions, and some Some plug-ins I wrote myself.

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 likevue-cli, usevue initdownloaded my own front-end project from github, which looks very "elegant".

Initialize the project structure

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 itx-build-cli. I refer to vue’s approach, so that even ifx-buildis updated,x-build-cliis not updated, you can also pull the latestx-build.

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

Create a folder namedx-build-cli, initialize it using npm, create abindirectory inside the folder, and createx- build.js, the project structure at this time:

x-build-cli |- bin | |- x-build.js |- package.json

Configure package.json

"bin": { "x-build": "./bin/x-build.js" }

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');

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

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

commandercan parse the commands entered by the user.

download-git-repoPull 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);

.option ()

-iis an abbreviation, similar to the[name afternpm i -g

init]can be obtained throughprogram.init.

The last item is the description, which will usually be prompted inx-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()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.1at 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

After the upload is successful, install it into the global environment through npm install x-build-cli -g.

Usebuild 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, changenameto the initialized project name, and changeversionChanged 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; }) });

Read the file through readFile, writeFile to write the file, be careful to pass it in when writingStringJSON.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.

Conclusion

If you have any questions, please leave a message in Issues. I also hope that everyone can give me a precious star on my github.

Other article recommendations

x-loader.js image loading control ES6 plug-in

rem adaptive solution·px2rem-loader&hotcss

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 using React high-order components

Encapsulate a function that can obtain the text content of an element

Detailed explanation of the difference between Component and PureComponent

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