Personnaliser l'échafaudage frontal

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 >>>

Initialisez le projetStructure

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 à -inpm 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

Télécharger sur npm

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.

Optimisation

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!