Parcel.js + Vue 2Tutoriales de experiencia de paquete de configuración cero极速.x

Después de Browserify y Webpack, ha aparecido otro herramienta de empaquetado: Parcel

La página web oficial de Parcel.js tiene una presentación autodescriptiva: 'Herramienta de paquete de aplicaciones web sin configuración rápida'

He tocado un poco, y en términos de eficiencia, realmente es mucho mejor que webpack, pero también hay muchos problemas, debería volverse más común después de las actualizaciones futuras

Documentación oficial:https://parceljs.org/getting_started.html

GitHub oficial:https://github.com/parcel-empaquetador/parcel

1. Uso básico

Parcel se puede instalar con npm o yarn, me gusta usar npm, este blog se basará en npm

Primero, es necesario instalar globalmente Parcel.js　　　 // Versión actual 1.3.0

instala npm -g parcel-empaquetador

Luego escribe un archivo de configuración... no, esto no es webpack, esto es parcel, empaquetado sin configuración

Crea directamente el directorio del proyecto, escribe una página tradicional simple

Luego abre la herramienta de línea de comandos en la carpeta raíz del proyecto e ingrese el siguiente comando

parcel index.html -p 3030

Luego abrelo en el navegador http://localhost:3030/ puede abrir la página desarrollada recientemente

En el comando anterior -p se usa para configurar el número de puerto, si no se configura, se iniciará por defecto 1234 puerto

Parcel admite actualizaciones en caliente, monitoreará los cambios en html, css y js y los renderizará de manera instantánea

// En realidad, los css y js que se importan a través de src no pueden actualizarse en caliente

Después de completar el desarrollo, ingrese el siguiente comando para empaquetar

parcel build index.html

Después del empaquetado se generará un directorio dist

¡Oh, no! ¿Dónde está el empaquetado que dijiste? ¿Por qué hay tantos archivos?

No te preocupes, esta página está escrita con un estilo tradicional, sin package.json, y luego al transformarla en un proyecto modular, podrías ver los efectos del empaquetado

Bueno, primero abra manualmente index.html para ver el efecto... ¿por qué no se carga el css?

Esto se debe a que las rutas empaquetadas son rutas absolutas, que no presentan problemas cuando se colocan en el servidor, pero si se necesita abrir localmente, deben modificarse manualmente a rutas relativas

Aplicación en proyectos modulares

Comienza la acción, primero transforma el proyecto anterior en un proyecto modular

a través de npm init -Crear un package.json predeterminado con el comando y y modificar los comandos de inicio y empaquetado

De esta manera, puedes iniciar el proyecto directamente con npm run dev y ejecutar el empaquetado con npm run build

Anteriormente se instalaba globalmente parcel, pero en la práctica se recomienda agregar la dependencia al proyecto

instala npm parcel-empaquetador -S

Arriba hay una página tradicional, que usa link para importar css

Dado que se necesita transformar en un proyecto modular, solo se necesita importar un main.js, y luego en main.js importar otros archivos css y js

Por lo tanto, se necesita usar import y otros ES6 Si necesitas instalar un babel, instala uno

instala npm babel-preset-env -S

Luego crea un archivo .babelrc en la carpeta raíz y agrega la siguiente configuración:

{
 "presets": ["env"]
}

Instala una herramienta de conversión css, como autoprefixer

instala npm postcss-módulos autoprefixer -S

Cree el archivo .postcssrc:

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

La documentación oficial también recomienda un plugin de compilación de recursos html: PostHTML, pero aquí no es necesario por el momento

Modifique el código por su cuenta, luego ejecute npm run build para empacar

Se puede ver que js y css se han integrado, y su contenido también ha sido compilado por babel y autoprefixer

Tercero, el uso de Parcel en proyectos de Vue

La documentación oficial proporciona una receta para proyectos de react

Pero a menudo uso vue, he investigado mucho y finalmente encontré la solución

Siguiendo el uso de index.html como punto de entrada, se introduce main.js mediante script:

<!-- index.html -->
<body>
 <div id="app"></div>
 <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)
}

Aquí quiero recomendar un plugin muy impresionante: parcel-plugin-vue, que permite que parcel y vue se unan con éxito

Además de lo mencionado anteriormente babel, autoprefixer, el último package.json es así:

{
 "name": "ParcelVue"
 "version": "1.0.0",
 "description": "El proyecto de parcel & vue creado por 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"
 }
}

Recuerden crear los archivos .postcssrc y .babelrc en la carpeta raíz

Luego, instale las dependencias con npm install, inicie el proyecto con npm run dev y打包项目 con npm run build

Resumen

Lo que se ha mencionado anteriormente es el tutorial de Parcel.js que les he presentado + Vue 2Tutorial de experiencia de paquete极速零配置，esperamos que les sea útil, si les ha sido útil.

Declaración: Este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w