Initialisieren der Projektstruktur im Frontend-Projekt

Dieses Mal werde ich Ihnen die Initialisierungsprojektstruktur im Front-End-Projekt vorstellen. Was sind die Vorsichtsmaßnahmen für die Initialisierung der Projektstruktur im Front-End-Projekt? ist ein praktischer Fall, werfen wir einen Blick darauf.

Normalerweise arbeite ich an mobilem H5, daher habe ich über Webpack mein eigenes Front-End-Projekt (x-build) erstellt und dabei hauptsächlich Stylus, Jade, ES6, adaptive Lösungen und einige kompiliert. Einige Plug-Ins habe ich selbst geschrieben .

Wenn Sie an einem neuen Projekt arbeiten, fühlt es sich jedes Mal, wenn Sie den Ordner kopieren und dann package.json, README.md usw. ändern, sehr „elegant“ an, wenn Sie etwas wie vue-cli verwenden möchten , verwenden Sie vue init Laden Sie mein eigenes Front-End-Projekt von Github herunter, das sehr „elegant“ aussieht.

Initialisieren Sie die Projektstruktur

Zunächst haben Sie bereits ein Front-End-Projekt, das Sie selbst erstellt haben, vorausgesetzt, es heißt x-build und wurde auf Github hochgeladen.

Erstellen Sie zu diesem Zeitpunkt ein neues Projekt und nennen Sie es x-build-cli. Ich beziehe mich auf den Ansatz von vue, sodass Sie auch dann die neueste Version abrufen können, wenn x-build aktualisiert wird und x-build-cli nicht aktualisiert wird x-build.

mkdir x-build-cli
cd x-build-cli
npm init

Erstellen Sie einen Ordner mit dem Namen x-build-cli, initialisieren Sie ihn mit npm, erstellen Sie ein bin-Verzeichnis innerhalb des Ordners und erstellen Sie zu diesem Zeitpunkt x-build.js

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json

Konfigurieren Sie package.json

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

Fügen Sie „bin“ in package.json hinzu. „x-build“ ist der in die Befehlsnummer einzugebende Befehl. „./bin/x-build.js“ ist die Datei wenn der Befehl ausgeführt wird.

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

gibt an, dass diese Datei mithilfe von node ausgeführt wird. #! /usr/bin/env node

Das Modul, das installiert werden muss, ist npm i commander download-git-repo chalk ora --save:

Kann die vom Benutzer eingegebenen Befehle analysieren. commander

Laden Sie die Dateien auf Github herunter. download-git-repo

Ändern Sie die Farbe des Ausgabetexteschalk

Kleine Symbole (Laden, Erfolgreich, Warnung usw.) ora

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

.option()

ist eine Abkürzung, ähnlich wie -inpm i -g

. Das init nach [name] kann über program.init abgerufen werden.

Das letzte Element ist die Beschreibung, normalerweise in der x-build -h Eingabeaufforderung

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() kann ein kleines Ladesymbol erstellt werden. >>> Weitere Symbole finden Sie unter ora

download(), um das von uns benötigte Projekt von Github herunterzuladen. Da wir einen Zweig verwenden, fügen wir am Ende #x-build4.1 hinzu Master. Parameter Konfigurationsreferenzdownload-git-repo

chalk.blueBright() wandelt den Ausgabetext in Blau um. >>> Weitere Farben finden Sie unter Kreide

Auf npm hochladen

Studenten, die noch kein Konto haben, können ein Konto auf npm registrieren.

// 登录账号
npm login
// 上传项目
npm publish

Nachdem der Upload erfolgreich war, installieren Sie ihn über npm install x-build-cli -g in der globalen Umgebung.

Verwenden Sie build init [项目名], um die entsprechenden Dateien von Github abzurufen.

Optimierung

Die derzeit heruntergeladene Datei stimmt mit github überein. Ich möchte package.json ändern, name in den initialisierten Projektnamen und version in 1.0 ändern. 0.

Zu diesem Zeitpunkt können Sie dazu die eigene API des Knotens verwenden:

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

Lesen Sie die Datei über readFile und schreiben Sie die Datei vorsichtig es beim Schreiben ein. StringJSON.stringify(_data, null, 4), so kann die formatierte JSON-Datei ausgegeben werden.

Das geht ganz einfach über den Knoten. Hier gibt es viel Raum für Entwicklung, daher werde ich nicht mehr sagen.

Fazit

Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht in „Probleme“. Ich hoffe auch, dass mir jeder einen wertvollen Stern auf meinem Github geben kann.

Andere Artikel empfohlen

x-loader.js Bildladesteuerung ES6-Plug-in

rem adaptive Lösung·px2rem-loader&hotcss

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von React-Komponenten höherer Ordnung

Kapseln Sie eine Funktion, die den Textinhalt eines abrufen kann Element

Detaillierte Erklärung des Unterschieds zwischen Component und PureComponent

Das obige ist der detaillierte Inhalt vonInitialisieren der Projektstruktur im Frontend-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!