Cette fois, je vais vous proposer une construction personnalisée d'échafaudage frontal. Quelles sont les précautions pour la construction personnalisée d'échafaudages frontaux. Voici des cas réels, jetons un coup d'œil.
Lorsque vous travaillez sur un nouveau projet, chaque fois que vous copiez le dossier puis modifiez package.json, README.md, etc., cela semble très "élégant" si vous souhaitez utiliser quelque chose comme vue-cli
. , utilisez vue init
Téléchargez mon propre projet front-end depuis github, qui a l'air très "élégant". Si vous pensez que cela a l'air bien, veuillez marquer >>>
Tout d'abord, vous avez déjà un projet front-end que vous avez construit vous-même, en supposant qu'il s'appelle x-build et qu'il a été téléchargé sur github.
À ce moment, créez un nouveau projet et nommez-le x-build-cli
Je fais référence à l'approche de vue, de sorte que même si x-build
est mis à jour et x-build-cli
n'est pas mis à jour, vous pouvez toujours extraire la dernière. x-build
.
mkdir x-build-cli cd x-build-cli npm init
Créez un dossier nommé x-build-cli
, initialisez-le avec npm, créez un répertoire bin
dans le dossier et créez x-build.js
La structure du projet à ce moment :
x-build-cli |- 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');
spécifie que ce fichier est exécuté à l'aide de node. #! /usr/bin/env node
Peut analyser les commandes saisies par l'utilisateur. commander
Récupérez les fichiers sur github. download-git-repo
Changer la couleur du texte de sortiechalk
Petites icônes (chargement, réussite, avertir, etc.) ora
program .version('0.1.0') .option('-i, init [name]', '初始化x-build项目') .parse(process.argv);
est une abréviation, similaire à -i
npm i -g
Le init
après [name]
peut être obtenu via program.init
.
Le dernier élément est la description, généralement dans l'invite 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()
Vous pouvez créer une petite icône de chargement. >>> Pour les autres icônes, reportez-vous à ora
download() pour télécharger le projet dont nous avons besoin depuis github. Parce que nous utilisons une branche, nous ajoutons #x-build4.1
à la fin. maître. Les paramètres Référence de configurationdownload-git-repo
chalk.blueBright()
convertiront le texte de sortie en bleu. >>> Pour d'autres couleurs, veuillez vous référer à la craie
Les étudiants qui n'ont pas de compte peuvent accéder à npm pour créer un compte.
// 登录账号 npm login // 上传项目 npm publish
Une fois le téléchargement réussi, installez-le dans l'environnement global via npm install x-build-cli -g.
Utilisez build init [项目名]
pour extraire les fichiers correspondants de github.
Le fichier téléchargé à ce moment est cohérent avec github. Je souhaite modifier package.json, remplacer name
par le nom du projet initialisé et remplacer version
par 1.0. 0.
Vous pouvez utiliser la propre API du nœud à ce moment :
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; }) });
Lisez le fichier via readFile, écrivez le fichier via writeFile, faites attention à ce qui suit lors de l'écriture Passez la chaîne JSON.stringify(_data, null, 4)
, et de cette façon, le fichier json formaté peut être généré.
Cela peut être fait facilement via node. Il y a beaucoup de place pour le développement ici, donc je n'en dirai pas plus.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée de la différence entre Component et PureComponent
Résumé des styles CSS couramment utilisés
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!