Méthode d'empaquetage de configuration rapide Parcel.js+Vue 2.x-js tutoriel-php.cn

Méthode d'empaquetage de configuration rapide Parcel.js+Vue 2.x

php中世界最好的语言

Libérer： 2018-04-13 16:01:18

original

1339 Les gens l'ont consulté

Cette fois, je vais vous présenter la méthode de configuration et de packaging rapides de Parcel.js+Vue 2.x Quelles sont les précautions pour une configuration et un packaging rapides de Parcel.js+Vue 2.x. . Ce qui suit est un cas pratique, jetons un coup d'œil.

Après Browserify et Webpack, un autre outil de packaging Parcel est né

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

Après un bref contact, en termes d'efficacité, c'est effectivement bien meilleur que webpack, mais il comporte 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

Parcel peut être installé en utilisant npm ou Yarn. Personnellement, j'ai l'habitude d'utiliser npm. Ce blog sera expliqué en fonction de npm

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

npm install -g parcel-bundler

Copier après la connexion

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

Directement créez le répertoire du projet et rédigez une simple page traditionnelle

Ensuite, ouvrez l'outil de ligne de commande dans le répertoire racine du projet et entrez la commande suivante

parcel index.html -p 3030

Copier après la connexion

Ouvrez ensuite 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, 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

// En fait, les CSS et js introduits via src ne peuvent pas être mis à jour à chaud

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

parcel build index.html

Copier après la connexion

Après emballage, le répertoire dist

sera généré Les sacs de Qiaodou, qu'en est-il de l'emballage promis ? Pourquoi y a-t-il encore autant de fichiers ?

Ne vous inquiétez pas, il s'agit d'une page écrite en écriture traditionnelle. Elle n'a même pas package.json. Ensuite, elle sera transformée en un projet modulaire, et vous pourrez 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

Commençons par le film principal, transformons d'abord le projet ci-dessus en un projet modulaire

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

et modifiez les commandes de démarrage et d'empaquetage npm init -y

De cette façon, vous pouvez démarrer directement le projet

via npm run dev , et exécuter le packaging npm run build

Auparavant, Parcel était installé globalement. En pratique, il est recommandé d'ajouter des dépendances au projet

npm install parcel-bundler -S

Copier après la connexion

. Ce qui précède est une page traditionnelle, utilisant css

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

Vous devez donc utiliser la syntaxe ES6 telle que import, puis installer babel

npm install babel-preset-env -S

Copier après la connexion

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

{
 "presets": ["env"]
}

Copier après la connexion

Installez un autre outil de conversion CSS, tel que autoprefixer

npm install postcss-modules autoprefixer -S

Copier après la connexion

Créer un fichier .postcssrc :

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

Copier après la connexion

Le document officiel recommande également un plug-in pour compiler des ressources html, PostHTML, mais il n'est pas nécessaire ici pour le moment

Modifiez vous-même le code et enfin

packagenpm run build

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

3. Utiliser Parcel dans les projets Vue

La documentation officielle donne des recettes adaptées aux projets React

但我常用的是 vue，研究了好久，终于找到了方法

依旧使用 index.html 作为入口，以 script 引入 main.js：

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

Copier après la connexion

这里要推荐一个很厉害的插件 parcel-plugin-vue，它让 parcel 和 vue 成功牵手

再加上之前提到的 babel、autoprefixer，最后的 package.json 是这样的：

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

Copier après la connexion

一定记得在根目录创建 .postcssrc 和 .babelrc 文件

然后 npm install 安装依赖， npm run dev 启动项目，npm run build 打包项目

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！