Dieses Mal werde ich Ihnen die Methode zur schnellen Konfiguration und Verpackung von Parcel.js+Vue 2.x vorstellen. Was sind die Vorsichtsmaßnahmen für die schnelle Konfiguration und Verpackung von Parcel.js+Vue 2.x? Das Folgende ist ein praktischer Fall. Schauen wir uns das an.
Nach Browserify und Webpack wurde ein weiteres Verpackungstool Parcel geboren
Auf der offiziellen Website von Parcel.js gibt es diese Selbstvorstellung als „Extrem schnelles Zero-Configuration-Tool zum Verpacken von Webanwendungen“
Nach einem kurzen Kontakt ist es in Bezug auf die Effizienz zwar viel besser als Webpack, aber es gibt viele Fallstricke. Nach zukünftigen Upgrades sollte es allmählich beliebter werden Offizielle Dokumentation:
https://parceljs.org/getting_started.html Offizieller GitHub: https://github.com/parcel-bundler/parcel
1. Grundlegende Verwendung Parcel kann mit npm oder Yarn installiert werden. Ich persönlich bin es gewohnt, npm zu verwenden
Zuerst müssen Sie Parcel.js global installieren // Aktuelle Version 1.3.0
Dann schreiben Sie einenpm install -g parcel-bundler
... Nein, das ist kein Webpack, das ist eine Paketverpackung ohne Konfiguration Erstellen Sie direkt
das Projektverzeichnisund schreiben Sie eine einfache traditionelle Seite Öffnen Sie dann das Befehlszeilentool im Projektstammverzeichnis und geben Sie den folgenden Befehl ein:
Öffnen Sie dann http://localhost:3030/ im Browser, um die Seite zu öffnen, die Sie gerade entwickelt habenparcel index.html -p 3030
Im obigen Befehl wird -p verwendet, um die Portnummer festzulegen. Wenn nicht festgelegt, wird standardmäßig Port 1234 gestartet
Parcel unterstützt Hot-Updates und überwacht Änderungen in HTML, CSS und JS und rendert sie sofort
// Tatsächlich können die über src eingeführten CSS- und JS-Dateien nicht im laufenden Betrieb aktualisiert werden
Geben Sie nach Abschluss der Entwicklung den folgenden Befehl ein, um
zu packen Nach dem Packen wird das dist-Verzeichnisparcel build index.html
generiert Qiaodou-Säcke, was ist mit der versprochenen Verpackung? Warum gibt es immer noch so viele Dateien?
Keine Sorge, dies ist eine auf herkömmliche Weise geschriebene Seite. Sie enthält nicht einmal package.json. Als nächstes wird sie in ein
modularesProjekt umgewandelt, und Sie können die Wirkung der Verpackung sehen Okay, lassen Sie mich zuerst index.html manuell öffnen, um den Effekt zu sehen ... Moment ... warum wird das CSS nicht geladen?
Dies liegt daran, dass die gepackten Pfade alle absolute Pfade sind, sodass es kein Problem ist, sie auf dem Server abzulegen. Wenn Sie sie lokal öffnen müssen, müssen Sie sie manuell in relative Pfade ändern
2. Anwendung in modularen Projekten Beginnen wir mit dem Hauptfilm und verwandeln Sie zunächst das obige Projekt in ein modulares Projekt
Erstellen Sie mit dem Befehl
eine Standard-Paketdatei.json und ändern Sie die Start- und Verpackungsbefehlenpm init -y
Auf diese Weise können Sie das Projekt direkt
npm run dev starten und die Verpackung ausführen npm run build
Bisher wurde Parcel global installiert. In der Praxis empfiehlt es sich, Abhängigkeiten zum Projekt hinzuzufügen
npm install parcel-bundler -S
verwendet und per Link eingeführt wird Da Sie es in ein modulares Projekt umwandeln möchten, müssen Sie nur eine main.js einführen und dann andere CSS- und JS-Dateien in main.js einführen
Sie müssen also die ES6-Syntax wie Import verwenden und dann babel installieren
Erstellen Sie dann eine .babelrc-Datei im Stammverzeichnis und fügen Sie die folgende Konfiguration hinzu:npm install babel-preset-env -S
{
"presets": ["env"]
}npm install postcss-modules autoprefixer -S
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}Ändern Sie den Code selbst und schließlich
Paketnpm run build
Sie können sehen, dass js und css integriert wurden und ihr Inhalt von babel und autoprefixer kompiliert wurde
3. Verwendung von Parcel in Vue-Projekten Die offizielle Dokumentation enthält Rezepte, die für Reaktionsprojekte geeignet sind
但我常用的是 vue，研究了好久，终于找到了方法
依旧使用 index.html 作为入口，以 script 引入 main.js：
<!-- index.html -->
<body>
<p id="app"></p>
<script src="./src/main.js"></script>
</body>
// main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
router,
render: h => h(App)
})这里要推荐一个很厉害的插件 parcel-plugin-vue，它让 parcel 和 vue 成功牵手
再加上之前提到的 babel、autoprefixer，最后的 package.json 是这样的：
{
"name": "ParcelVue",
"version": "1.0.0",
"description": "The project of parcel & vue created by Wise Wrong",
"main": "main.js",
"scripts": {
"dev": "parcel index.html -p 3030",
"build": "parcel build index.html"
},
"keywords": [
"parcel",
"vue"
],
"author": "wisewrong",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.3",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.3.0",
"parcel-plugin-vue": "^1.4.0",
"postcss-modules": "^1.1.0",
"vue-loader": "^13.6.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13"
},
"dependencies": {
"vue": "^2.5.13",
"vue-router": "^3.0.1"
}
}一定记得在根目录创建 .postcssrc 和 .babelrc 文件
然后 npm install 安装依赖， npm run dev 启动项目，npm run build 打包项目
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonParcel.js+Vue 2.x Schnellkonfigurations-Paketierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
