Comment réaliser un packaging extrêmement rapide sans configuration dans Parcel.js + Vue 2.x

Cet article présente principalement des informations pertinentes sur l'expérience d'empaquetage extrêmement rapide sans configuration de Parcel.js + Vue 2.x. Les amis dans le besoin peuvent s'y référer

Après Browserify et Webpack, Parcel est un autre outil d'empaquetage. s'est avéré être

Le site officiel de Parcel.js a cette auto-présentation comme "Outil d'empaquetage d'applications Web extrêmement rapide sans configuration"

Après un bref contact, en termes d'efficacité, c'est en effet mieux que webpack Il y en a beaucoup, mais il y a aussi beaucoup de 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

Utilisation de base

Parcel peut être installé en utilisant npm ou fil Personnellement, j'utilise npm Ce blog expliquera en fonction de npm

Vous devez d'abord installer Parcel.js globalement // Version actuelle 1.3.0

npm install -g parcel-bundler

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

Créez directement le répertoire du projet, écrivez une simple page traditionnelle avec

, puis ouvrez l'outil de ligne de commande dans le répertoire racine du projet, 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

Dans la commande ci-dessus, -p est utilisé pour définir le numéro de port. S'il n'est pas défini, il démarrera par défaut.

le colis prend en charge la mise à jour à chaud et surveillera les modifications en HTML, CSS et JS. et restituez-les immédiatement

// En fait, css et js introduits via src ne peuvent 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 répertoire dist sera généré

Sac Qiaodou, qu'en est-il de 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 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, appliqué aux projets modulaires Démarrez la vidéo principale, transformez d'abord le projet ci-dessus en un projet modulaire

Créez un package par défaut. json via la commande

et modifiez les commandes de démarrage et d'empaquetage

npm init -y afin que le projet puisse être démarré directement via

, et

exécute le package npm run dev npm run build précédemment. une parcelle installée globalement. Dans la pratique réelle, il est plus recommandé dans le projet Ajouter des dépendances

Ce qui précède est une page traditionnelle, utilisez le lien pour introduire le CSS

npm install parcel-bundler -S

Puisque vous souhaitez transformez-le en un projet modulaire, il vous suffit d'introduire un main.js, puis dans main.js introduit d'autres fichiers css et js

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

Créez ensuite un fichier .babelrc dans le répertoire racine et ajoutez la configuration suivante :

npm install babel-preset-env -S

Installez un outil de conversion CSS, tel qu'autoprefixer

{
 "presets": ["env"]
}

Créez un fichier .postcssrc :

npm install postcss-modules autoprefixer -S

Le document officiel recommande également un plug-in PostHTML qui compile les ressources html, mais il n'est pas nécessaire de

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

modifier le code vous-même pour pour le moment. Enfin,

package

npm run build vous pouvez voir que js et css ont été intégrés, et son contenu a également été traité par babel et Compilation de préfixe automatique

3. Utiliser Parcel dans les projets VueLes documents officiels donnent des recettes adaptées aux projets React

Mais j'utilise habituellement Vue après de longues recherches, j'ai finalement réussi. trouvé une méthode

Toujours en utilisant index.html comme entrée et en introduisant main.js avec script :

Je recommande ici Un plug-in parcelle-plugin-vue très puissant, qui permet à Parcel et Vue de se donner la main avec succès

<!-- index.html -->
<body>
 <p id="app"></p>
 <script src="./src/main.js"></script>
</body>

// main.js

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./css/common.css&#39;

Vue.config.productionTip = false

const vm = new Vue({
 el: &#39;#app&#39;,
 router,
 render: h => h(App)
})

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

Assurez-vous 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, npm run build emballe le projet

Ce qui précède est ce que j'ai compilé pour vous Oui, j'espère que ce sera le cas être utile à tout le monde à l’avenir.

Articles connexes :

Définir l'image d'arrière-plan dans Vue

Comment résoudre le problème de l'image de ressource statique non valide après l'empaquetage de vue

Comment déployer des projets vue-router et express sur le serveur

Solution à la requête locale 404 utilisant axios + express sous Vue 2.5.2

Utilisez vue et réagissez pour obtenir des effets d'expansion et de réduction

Comment implémenter l'optimisation du packaging Webpack dans vue

Explication détaillée du style de codage Vue

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!