Maison > interface Web > js tutoriel > le corps du texte

Personnaliser l'échafaudage frontal

php中世界最好的语言
Libérer: 2018-05-24 15:53:45
original
2300 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion
Configurer package.json

"bin": {
  "x-build": "./bin/x-build.js"
}
Copier après la connexion
Ajouter "bin" dans package.json, "x-build" est la commande à saisir, "./bin/x-build.js" est le fichier lorsque la commande est exécutée.

Configuration de 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');
Copier après la connexion

spécifie que ce fichier est exécuté à l'aide de node. #! /usr/bin/env node

Le module qui doit être installé est npm i commander download-git-repo chalk ora --save :

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);
Copier après la connexion
.option()

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{
      // 可以输出一些项目失败的信息
    }
  })
}
Copier après la connexion

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
Copier après la connexion

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;
  })
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!