Maison > Article > interface Web > 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".
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.jsonConfigurer 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
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 à -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.
À 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.
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.
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!