Parcel.js + Vue 2.x 极速零配置打包体验教程

Dopo Browserify, Webpack, un altro strumento di pacchettizzazione, Parcel, è apparso all'improvviso

Il sito web ufficiale di Parcel.js ha una presentazione auto: "Strumento di pacchettizzazione Web applicazione senza configurazione e veloce"

Ho avuto un breve contatto con esso, e in termini di efficienza, è davvero molto più forte di webpack, ma ci sono anche molte insidie, dovrebbe diventare sempre più diffuso dopo l'aggiornamento futuro

Documentazione ufficiale:https://parceljs.org/getting_started.html

GitHub ufficiale:https://github.com/parcel-bundler/parcel

1. Uso di base

Parcel può essere installato con npm o yarn, ho l'abitudine di usare npm, questo blog si baserà su npm

Devi prima installare globalmente Parcel.js // Versione attuale 1.3.0

npm install -g parcel-bundler

Poi scrivi un file di configurazione... non, questo non è webpack, è parcel, pacchettizzazione senza configurazione

Crea direttamente la directory del progetto e crea una pagina tradizionale semplice

Apri lo strumento della riga di comando nella directory radice del progetto e inserisci il seguente comando

parcel index.html -p 3030

Apri il browser http://localhost:3030/ Puoi aprire la pagina sviluppata di recente

Nel comando sopra, -p viene utilizzato per impostare il numero di porta, se non viene impostato, viene utilizzato il numero di porta predefinito 1234

Parcel supporta l'aggiornamento in tempo reale, monitora le modifiche di html, css e js e li rende istantaneamente

// I css e js introdotti tramite src non possono essere aggiornati in tempo reale

Dopo aver completato lo sviluppo, digitare i seguenti comandi per il packaging

parcel build index.html

Dopo il packaging verrà generata la directory dist

Ciao, ma dove è il packaging? Perché ci sono ancora così tanti file?

Non preoccuparti, questa è una pagina scritta con la scrittura tradizionale, senza package.json, quindi dopo averla trasformata in un progetto modularizzato, si vedrà l'effetto di packaging

Beh, aprirò manualmente index.html per vedere l'effetto... aspetta... perché il css non viene caricato?

Questo è perché i percorsi di打包 sono tutti percorsi assoluti, va bene metterli sul server, ma se si desidera aprire localmente, è necessario modificare manualmente in percorsi relativi

Applicazione in progetto modularizzato

Inizia la parte principale, prima di trasformare il progetto sopra in un progetto modularizzato

Creare un package.json predefinito con il comando npm init -y e modificare i comandi di avvio e pacchetto

In questo modo è possibile avviare il progetto tramite npm run dev e eseguire il pacchetto tramite npm run build

Prima era installato globalmente parcel, ma in pratica si raccomanda di aggiungere la dipendenza nel progetto

npm install parcel-bundler -S

Questo è un pagina tradizionale, che utilizza link per introdurre il css

Poiché si desidera trasformare il progetto in un progetto modularizzato, è sufficiente importare un main.js e poi altri file css e js nel main.js

Quindi è necessario utilizzare la sintassi ES6 come import, quindi installare un babel

npm install babel-preset-env -S

Poi creare un file .babelrc nella directory radice e aggiungere la seguente configurazione:

{
 "presets": ["env"]
{}

Installare anche uno strumento di conversione CSS, ad esempio autoprefixer

npm install postcss-modules autoprefixer -S

Creare un file .postcssrc:

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

La documentazione ufficiale raccomanda anche un plugin di compilazione delle risorse HTML chiamato PostHTML, ma non è necessario qui temporaneamente

自行改造代码，最后 npm run build 打包

Modifica il codice da solo, infine esegui npm run build per impacchettare

Si può vedere che js e css sono stati integrati, e il loro contenuto è stato compilato con babel e autoprefixer

Terza parte: l'uso di Parcel in un progetto Vue

La documentazione ufficiale fornisce una ricetta adatta ai progetti react

Ma quello che uso di più spesso è vue, dopo averlo studiato a lungo, finalmente ho trovato il metodo

Utilizzo ancora index.html come punto di ingresso, includendo main.js con script:
<!-- index.html -->
 <body>
 <div id="app"></div>
<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)

})

Aggiungiamo ora l'plugin molto potente "parcel-plugin-vue", che fa sì che parcel e vue si sposino con successo

{
 "name": "ParcelVue"
 "version": "1.0.0"
 "description": "Il progetto di parcel & vue creato da 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"
 {}
{}

Ricorda di creare i file .postcssrc e .babelrc nella directory principale

Poi installa le dipendenze con npm install, avvia il progetto con npm run dev e impacchetta il progetto con npm run build

Sommario

Il seguente è un tutorial di rapida configurazione zero di Parcel.js + Vue 2.x che l'editor ha introdotto agli utenti. Spero che sia utile a tutti voi.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito autonomamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, è gradito inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema, fornendo prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.