Parcel.js+Vue 2.x Schnellkonfigurations-Paketierungsmethode

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 eine

npm install -g parcel-bundler

Konfigurationsdatei

... Nein, das ist kein Webpack, das ist eine Paketverpackung ohne Konfiguration Erstellen Sie direkt

das Projektverzeichnis

und 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 haben

parcel 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-Verzeichnis

parcel 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

modulares

Projekt 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 Verpackungsbefehle

npm init -y Auf diese Weise können Sie das Projekt direkt

bis

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

Das Obige ist eine traditionelle Seite, die CSS

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

Installieren Sie ein anderes CSS-Konvertierungstool, z. B. Autoprefixer

{
 "presets": ["env"]
}

Erstellen Sie eine .postcssrc-Datei:

npm install postcss-modules autoprefixer -S

Das offizielle Dokument empfiehlt auch ein Plug-in zum Kompilieren von HTML-Ressourcen, PostHTML, wird hier jedoch vorerst nicht benötigt

{
 "modules": true,
 "plugins": {
 "autoprefixer": {
  "grid": true
 }
 }
}

Ändern Sie den Code selbst und schließlich

Paket

npm 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中文网其它相关文章！

推荐阅读：

怎么提速优化vue-cli的代码

HTML+JS实现滚动数字的时钟

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!