ホームページ >ウェブフロントエンド >jsチュートリアル >フロントエンドプロジェクトでのプロジェクト構造の初期化
今回はフロントエンドプロジェクトの初期化プロジェクト構造について説明します。フロントエンドプロジェクトでプロジェクト構造を初期化する際の注意事項について、実際のケースを見てみましょう。
私は普段モバイル H5 で作業しているので、webpack を通じて独自のフロントエンド プロジェクト (x-build) を構築し、主にスタイラス、jade、es6、アダプティブ ソリューション、および自分で作成したプラグインをコンパイルしました。
新しいプロジェクトで作業するとき、vue-cli
のようなものを使用したい場合、毎回フォルダーをコピーしてから package.json や README.md などを変更するのは非常に「エレガント」だと感じます。 、 を使用します。 vue init
を使用して、github から独自のフロントエンド プロジェクトをダウンロードしました。これは非常に「エレガント」に見えます。 vue-cli
,使用vue init
的方式在github下载我自己的前端工程,这样显得很“优雅”。
首先你已经有了自己搭建的前端工程,假设起名为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
"bin": { "x-build": "./bin/x-build.js" }
在package.json增加"bin","x-build"就是命令号要输入的指令,"./bin/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 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-cli
という名前を付けます。これは、x-build
が更新されても、 x-build-cli が更新されていない場合でも、最新の x-build
を取得できます。 rrreee
x-build-cli
という名前のフォルダーを作成し、npm で初期化し、フォルダー内に bin
ディレクトリを作成し、x-build js を作成します。
、このときのプロジェクト構造: rrreee
package.jsonに「bin」を追加、「x-build」は入力するコマンド、「./bin/x - build.js」はコマンド実行時のファイルです。 x-build.js の構成🎜rrreee🎜#!/usr/bin/env node
は、このファイルがノードを使用して実行されることを指定します。 🎜🎜インストールする必要があるモジュール 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()
は出力テキストを青色に変換します。 >>> 他の色はチョークを参照🎜🎜npmにアップロード🎜🎜アカウントを持っていない学生はnpmにアクセスしてアカウントを登録してください。 🎜rrreee🎜 アップロードが成功したら、npm install x-build-cli -g を通じてグローバル環境にインストールします。 🎜🎜 build init [プロジェクト名]
を使用して、対応するファイルを github からプルします。 🎜🎜最適化🎜🎜この時点でダウンロードしたファイルはgithubと一致するように、package.jsonを変更し、name
を初期化されたプロジェクト名に変更し、version
を次のように変更したいと思います。 1.0。 🎜🎜現時点では、ノード独自の API を使用できます: 🎜rrreee🎜 readFile を通じてファイルを読み取ります 🎜、writeFileファイルを書き込みます。🎜JSON.stringify (_data, null、4)
、この方法でフォーマットされた json ファイルを出力できます。 🎜🎜これはノードを通じて簡単に実行できます。ここには開発の余地がたくさんあるので、これ以上は言いません。 🎜🎜結論🎜🎜 ご質問がございましたら、Issue にメッセージを残してください。また、皆さんが私の github で貴重なスターをクリックしていただければ幸いです。 🎜🎜他のおすすめ記事🎜🎜x-loader.js画像読み込み制御ES6プラグイン🎜🎜rem適応ソリューション・px2rem-loader&hotcss🎜この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がフロントエンドプロジェクトでのプロジェクト構造の初期化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。