Maison > Article > interface Web > Explication détaillée de la façon dont Vue configure les outils d'empaquetage

Explication détaillée de la façon dont Vue configure les outils d'empaquetage

亚连original: 2018-06-11 17:31:272698parcourir

Cet article présente principalement l'explication détaillée de l'outil d'empaquetage rapide sans configuration de Vue - colis. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente l'outil d'emballage rapide sans configuration de Vue - Parcel, et le partage avec tout le monde. Les détails sont les suivants :

Caractéristiques

Emballage rapide
Emballer toutes les ressources
Conversion automatique
Code fractionnement
Remplacement à chaud du module
Journalisation conviviale des erreurs

Comment ça marche

Parcel convertit les arbres de ressources en arbres de paquets. De nombreux autres outils de packaging sont essentiellement basés sur des ressources JavaScript, auxquelles sont attachées des ressources dans d’autres formats. Par exemple, insérez-le dans une chaîne d'un fichier JS. Parcel est indépendant du type de fichier, il peut fonctionner avec n'importe quel type de ressource comme vous le souhaitez et ne nécessite aucune configuration.

Construire l'arborescence des ressources

Parcel accepte une seule ressource d'entrée en entrée, qui peut être de n'importe quel type : JS, HTML, CSS, fichiers image, etc. Il existe de nombreux types de ressources différents définis dans Parcel, qui sait comment gérer des types de fichiers spécifiques. Les ressources seront analysées, les dépendances des ressources seront extraites et les ressources seront converties dans la forme compilée finale. Ce processus crée une arborescence de ressources.

Construire l'arborescence du bundle de fichiers

Une fois l'arborescence des ressources construite, les ressources seront placées dans l'arborescence du bundle de fichiers. Tout d'abord, une ressource d'entrée sera créée dans un bundle de fichiers, puis Dynamic import() sera créée dans un bundle de sous-fichiers, ce qui déclenche le fractionnement du code. Lorsque des ressources de fichiers de différents types sont introduites, des ensembles de fichiers frères sont créés. Par exemple, si vous introduisez un fichier CSS dans JavaScript, il sera placé dans un bundle de fichiers frères correspondant au fichier JavaScript. Si une ressource est référencée par plusieurs bundles, elle est promue vers l'ancêtre commun le plus proche dans l'arborescence du bundle afin que la ressource ne soit pas empaquetée plusieurs fois.

Emballage

Une fois l'arborescence des ensembles de fichiers créée, chaque ensemble de fichiers sera écrit par le conditionneur dans un fichier d'un type de fichier spécifique. Les conditionneurs savent comment combiner le code de chaque ressource dans un fichier qui est finalement chargé par le navigateur.

Configuration

Projet d'initialisation

 npm install -g parcel
 mkdir xxx && cd xxx && npm init -y

Conversion

Babel

npm install babel-preset-env --save-dev

Configuration du répertoire racine .babelrc

 {
  "presets": ["env"]
 }

PostCSS

npm install postcss-modules autoprefixer --save-dev

Configuration du répertoire racine.postcssrc

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

Support vue

npm install parcel-plugin-vue --save-dev

Ajouter une entrée

 import App from &#39;./App.vue&#39;
 import router from &#39;./router/index.js&#39;
 import &#39;./assets/js/rem.js&#39;
 window.onload = () => {
  const vm = new Vue({
   el: &#39;#app&#39;,
   router,
   render: h => h(App)
  })
 }

Configurer index.html

 <body>
  <p id="app"></p>
  <script src="入口文件"></script>
 </body>

Configurer le routage (séparation du code-chargement paresseux)

 {
   path: &#39;home&#39;,
   component: () =>import(&#39;../pages/home.vue&#39;)
 }

import() renvoie une promesse, vous pouvez donc également utiliser Syntaxe async/await Lorsque vous souhaitez utiliser la syntaxe async/await localement, veuillez introduire babel-polyfill

pour faire la distinction entre l'environnement de production et l'environnement de développement, configurez package.json.

dev - - - Environnement de développement

build --- Environnement de production

 "scripts": {
   "dev": "parcel index.html -p 3700",
   "build": "parcel build index.html"
  }

Terminé

Visitez http://localhost:3700/home

Cette démo est complétée par vue + parcelle + grille + stylet : parcelle-vue

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment obtenir la valeur dans select dans vue.js (tutoriel détaillé)

Comment l'obtenir Vue Utiliser des slots pour distribuer du contenu via des slots

Comment encapsuler des composants réutilisables dans vue

Comment juger les différences de date et d'heure en JavaScript

Comment modifier la valeur des accessoires dans le composant enfant vue2.0 et transmettre la valeur au composant parent

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!

JavaScript json css vue.js stylus html 封装 select 字符串 JS promise http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment emballer en utilisant ParcelArticle suivant：Comment emballer en utilisant Parcel

Articles Liés

Voir plus