Exemple d'expérience d'empaquetage extrêmement rapide sans configuration Parcel.js et Vue 2.x

Après Browserify et Webpack, un autre outil d'empaquetage Parcel est né. Le site officiel de Parcel.js se présente lui-même comme "un outil d'empaquetage d'applications Web extrêmement rapide et sans configuration". Cet article présente principalement les informations pertinentes sur l'expérience d'emballage extrêmement rapide sans configuration de Parcel.js + Vue 2.x. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Après un bref contact, en termes d'efficacité, c'est effectivement bien meilleur que webpack, mais il y a de nombreux pièges Il devrait progressivement devenir plus populaire après les futures mises à jour

Documentation officielle : https : //parceljs.org/getting_started.html

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

1 Utilisation de base

Le colis peut être. utilisé npm ou l'installation de fils, j'utilise personnellement npm, ce blog vous expliquera en fonction de npm

Vous devez d'abord installer Parcel.js globalement // La version actuelle est 1.3.0

npm install -g parcel-bundler

Ensuite, écrivez un fichier de configuration... Non, ce n'est pas du webpack, c'est un packaging sans configuration

crée directement le répertoire du projet, écrit une simple page traditionnelle

puis s'ouvre. la ligne de commande dans le répertoire racine du projet Tool, entrez la commande suivante

parcel index.html -p 3030

puis ouvrez http://localhost:3030/ dans le navigateur pour ouvrir la page que vous venez de développer

-p dans la commande ci-dessus est utilisé pour les paramètres Numéro de port, s'il n'est pas défini, le port 1234 sera démarré par défaut

parcel prend en charge les mises à jour à chaud et surveillera les modifications en HTML, CSS et JS et les restituera instantanément

// Le CSS réellement introduit via src , js ne peut pas être mis à jour à chaud

Une fois le développement terminé, entrez la commande suivante pour empaqueter

parcel build index.html

Après l'emballage, le Le répertoire dist sera généré

Sac Qiaodou, comme promis pour l'emballage ? Pourquoi y a-t-il encore autant de fichiers ?

Ne vous inquiétez pas, il s'agit d'une page écrite de manière traditionnelle. Elle n'a même pas de package.json. Ensuite, si vous la transformez en projet modulaire, vous pouvez voir l'effet du packaging.

D'accord, laissez-moi d'abord ouvrir index.html manuellement pour voir l'effet... attendez... pourquoi le CSS n'est-il pas chargé ?

En effet, les chemins empaquetés sont tous des chemins absolus, ce n'est donc pas un problème de les mettre sur le serveur. Si vous devez les ouvrir localement, vous devez les modifier manuellement en chemins relatifs

<.> 2. Application dans les projets modulaires

En commençant par le film principal, transformez d'abord le projet ci-dessus en un projet modulaire

Créez un package.json par défaut via la commande npm init -y, et modifier les commandes de démarrage et d'empaquetage

De cette façon, vous pouvez démarrer le projet directement via npm run dev. npm run build exécute le package

qui a été précédemment installé globalement. recommandé d'ajouter des dépendances au projet

npm install parcel-bundler -S

Ce qui précède est une page traditionnelle Le css introduit en utilisant le lien

Puisque vous souhaitez le transformer en un projet modulaire, il vous suffit de l'introduire. un main.js, puis introduire d'autres fichiers css et js dans main.js

Vous devez donc utiliser la syntaxe ES6 telle que l'importation, puis installer un babel

npm install babel-preset-env -S

Ensuite, créez un .babelrc dans le répertoire racine et ajoutez la configuration suivante :

{
 "presets": ["env"]
}

Installez un outil de conversion CSS, tel qu'un préfixe automatique

npm install postcss-modules autoprefixer -S

Créez un fichier .postcssrc :

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

Le document officiel recommande également un plug-in PostHTML pour compiler les ressources html, mais le voici pour l'instant. Il n'est pas nécessaire de

modifier le code vous-même. Enfin, npm run build package

Vous pouvez voir que js et css ont été intégrés, et leur contenu a également été compilé par babel et autoprefixer

3. Utiliser Parcel dans les projets Vue

Le document officiel donne un formule adaptée aux projets React

Mais j'utilise habituellement vue Après de longues recherches, j'ai finalement trouvé la méthode

Utilisez toujours index.html comme entrée et utilisez un script pour introduire main. .js :

Nous recommandons ici un plug-in parcel-plugin-vue très puissant, qui permet à parcelle et vue de s'associer avec succès

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

Couplé avec babel et autoprefixer mentionnés précédemment, le package.json final ressemble à ceci :

N'oubliez pas de créer les fichiers .postcssrc et .babelrc dans le répertoire racine

{
 "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"
 }
}

Ensuite, npm install installe les dépendances, npm run dev démarre le projet et npm run build package le projet.

Recommandations associées :

Exemples détaillés sur la façon de télécharger des fichiers par lots et de les empaqueter dans Vue

Installation et base de Webpack utilisation de l'empaquetage Explication détaillée des paramètres de commande

Comment empaqueter des projets vue dans des fichiers statiques

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!