La façon classique de construire et de build une application Vue js est avec webpack, et en effet, presque tout ce qui concerne Vue suppose que vous utiliserez webpack. Cependant, vous n’êtes pas obligé de le faire. Vous pouvez utiliser Vue.js sans outil de construction ou utiliser un autre bundler de modules. C’est presque une blague à ce stade que de dire que la configuration de webpack peut être un voyage mystique, mais ce n’est pas la seule option pour vous. ParcelJS remplit essentiellement le même rôle que webpack, mais propose zéro configuration. Il suffit d’installer les dépendances et de lancer la construction de Parcel pour obtenir une application parfaitement intégrée.
Voyons donc comment configurer Parcel pour une application Vue.js.
Création de votre application Vue JS pour Parcel
Contrairement à nos étapes habituelles, allons-y et configurons les fichiers du squelette de l’application avant de faire quoi que ce soit d’autre.
Dans le répertoire de votre projet, créez un nouveau répertoire appelé src. La structure finale des fichiers ressemblera à quelque chose comme ceci
./mon-projet
├── package.json // Générer ceci avec `npm init`
├── index.html
├── .babelrc // Babel est nécessaire.
└── src
├── App.vue
└── main.js
Commencez par votre index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon Application Vue.js</title>
</head>
<body>
<div id="app"></div>
<!-- Notez la référence à src ici. Parcel va le réécrire lors de la construction. -->
<script src="./src/main.js"></script>
</body>
</html>Ajoutez ensuite le code de Vue.
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});Et maintenant le composant App.
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Bienvenue dans votre application Vue.js!'
}
}
}
</script>
<style lang="css">
#app {
color: #e74c3c;
}
</style>Ajoutez également le fichier .babelrc, juste pour faire bonne mesure.
{
"presets": [
"env"
]
}Ajout de Parcel pour Vue JS
La configuration de Parcel est aussi simple que l’installation de quelques dépendances.
Tout d’abord, installons tout ce dont nous avons besoin pour l’application Vue elle-même.
# Yarn
$ yarn add vue
# NPM
$ npm install vue --savePuis Parcel, un plugin pour Vue, et babel-preset-env…
# Yarn
$ yarn add parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env -D
# NPM
$ npm install parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env --save-devMaintenant… eh bien, c’est tout en fait.
Lancer Parcel
Vous devriez maintenant être capable d’exécuter votre application en mode développement avec un rechargement à chaud en lançant npx parcel dans votre répertoire de projet. Pour construire en production avec minification et élimination du code mort, utilisez simplement npx parcel build.
Mais que faire si je veux eslint ?
C’est très simple, il suffit d’installer les packages eslint, eslint-plugin-vue, et parcel-plugin-eslint.
# Yarn
$ yarn add eslint eslint-plugin-vue parcel-plugin-eslint -D
# NPM
$ npm install eslint eslint-plugin-vue parcel-plugin-eslint --save-devN’oubliez pas de créer votre .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/essential'
]
}Qu'en est-il de LESS / SASS / PostCSS ?
Ils sont supportés par Parcel dès le départ ! Même dans les composants Vue ! Pour plus d’informations sur les types d’actifs intégrés, consultez la documentation officielle de Parcel.
