Initialisation de la structure du projet dans le projet front-end

Cette fois, je vais vous présenter la structure du projet d'initialisation dans le projet front-end. Quelles sont les précautions pour initialiser la structure du projet dans le projet front-end. est un cas pratique, jetons-y un coup d'œil.

Je travaille habituellement sur mobile H5, j'ai donc construit mon propre projet front-end (x-build) via webpack, compilant principalement stylet, jade, es6, solutions adaptatives et quelques plug-ins que j'ai écrits moi-même .

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

Initialisez la structure du projet

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

Configurer package.json

"bin": {
  "x-build": "./bin/x-build.js"
}

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');

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, succès, avertissement, etc.) ora

program
  .version('0.1.0')
  .option('-i, init [name]', '初始化x-build项目')
  .parse(process.argv);

.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{
      // 可以输出一些项目失败的信息
    }
  })
}

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.

À ce stade, vous pouvez utiliser la propre API du nœud pour le faire :

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 et writeFile pour écrire le fichier. lors de l'écriture. Passez la chaîne JSON.stringify(_data, null, 4), et de cette façon, un 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.

Conclusion

Si vous avez des questions, veuillez laisser un message dans Issues. J'espère également que tout le monde pourra me donner une précieuse étoile sur mon github.

Autres articles recommandés

Plug-in ES6 de contrôle de chargement d'image x-loader.js

Solution adaptative rem·px2rem-loader&hotcss

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 l'utilisation des composants d'ordre supérieur de React

Encapsuler une fonction qui peut obtenir le contenu textuel d'un element

Explication détaillée de la différence entre Component et PureComponent

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!