ホームページ > 記事 > ウェブフロントエンド > フロントエンドのスキャフォールディングをカスタマイズする

フロントエンドのスキャフォールディングをカスタマイズする

php中世界最好的语言オリジナル: 2018-05-24 15:53:452259ブラウズ

今回はフロントエンドスキャフォールディングのカスタムビルドについてご紹介します。以下は、フロントエンドスキャフォールディングのカスタムビルドの注意事項です。

新しいプロジェクトで作業するとき、vue-cli のようなものを使用したい場合、毎回フォルダーをコピーしてから package.json や README.md などを変更するのは非常に「エレガント」だと感じます。、 を使用します。 vue init を使用して、github から独自のフロントエンドプロジェクトをダウンロードしました。これは非常に「エレガント」に見えます。良さそうだと思ったら、>>> x-build-cli にスターを付けてください。 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)

プロジェクト構造を初期化する

まず、自分で構築したフロントエンドプロジェクトがすでにあり、x-build という名前で github にアップロードされているとします。

この時点で、新しいプロジェクトを作成し、x-build-cli という名前を付けます。これは、x-build が更新されても、 x-build-cli が更新されていない場合でも、最新の x-build を取得できます。

rrreee

x-build-cli という名前のフォルダーを作成し、npm で初期化し、フォルダー内に bin ディレクトリを作成し、x-build js を作成します。 、この時点のプロジェクト構造:

rrreee

configure package.json

rrreee

パッケージに「bin」、「x-build」を追加します。 json はコマンド番号に入力するコマンド、「./bin/x-build.js」はコマンド実行時のファイルです。

x-build.js を構成する

rrreee#! /usr/bin/env ノード は、このファイルがノードを使用して実行されることを指定します。

インストールする必要があるモジュール npm i Commander download-git-repo Chalk ora --save:

commander は、ユーザーが入力したコマンドを解析できます。
download-git-repo は github からファイルをプルします。

🎜chalk出力テキストの色を変更します🎜🎜ora小さなアイコン (読み込み、成功、警告など)🎜rrreee🎜.option()🎜🎜-i は、npm i -g🎜🎜init に似た省略形です。 の後の <code>[name] です。 init は、 program.init を介して渡すことで取得できます。 🎜🎜最後の項目は説明で、通常は x-build -h でプロンプトが表示されます🎜rrreee🎜ora().start() は小さな読み込みアイコンを作成できます。 >>> 他のアイコンは、github から必要なプロジェクトをダウンロードするための ora🎜🎜download() を参照しています。ブランチを使用しているため、最後に #x-build4.1 を追加します。デフォルトはマスターです。パラメータ設定リファレンス🎜download-git-repo🎜🎜chalk.blueBright() は出力テキストを青色に変換します。 >>> 他の色については、チョークを参照してください🎜