Parcel.js and Vue 2.x extremely fast zero-configuration packaging experience example

After Browserify and Webpack, another packaging tool Parcel was born. The official website of Parcel.js has this self-introduction as "Extremely fast zero-configuration web application packaging tool." This article mainly introduces the relevant information of Parcel.js + Vue 2.x extremely fast zero-configuration packaging experience. Friends who need it can refer to it. I hope it can help everyone.

After a brief contact, in terms of efficiency, it is indeed much better than webpack, but there are many pitfalls. It should gradually become popular after future upgrades

Official document: https: //parceljs.org/getting_started.html

Official GitHub: https://github.com/parcel-bundler/parcel

1. Basic usage

Parcel can be used npm or yarn installation, personally use npm, this blog will explain based on npm

First you need to install Parcel.js globally //The current version is 1.3.0

npm install -g parcel-bundler

Then write a configuration file. .. No, this is not webpack, this is parcel, zero-configuration packaging

Create the project directory directly, write a simple traditional page

Then open the command line tool in the project root directory, Enter the following command

parcel index.html -p 3030

and then open http://localhost:3030/ in the browser to open the page you just developed

In the above command, -p is used to set the port number. If If not set, port 1234 will be started by default

parcel supports hot updates and will monitor changes in html, css, and js and render them immediately

// In fact, css and js introduced through src cannot be hot updated Update

After the development is completed, enter the following command for packaging

parcel build index.html

The dist directory will be generated after packaging

Qiaodou sack, where is the package? Why are there still so many files?

Don’t worry, this is a page written in traditional writing. It doesn’t even have package.json. Next, transform it into a modular project and you can see the effect of packaging

Okay, let me open index.html manually first to see the effect...wait...why is the css not loaded?

This is because the packaged paths are all absolute paths, so it is no problem to put them on the server. If you need to open them locally, you have to manually change them to relative paths

2. Application in modular projects

Starting with the main film, first transform the above project into a modular project

Create a default package.json through the npm init -y command, and modify the startup and packaging commands

In this way, you can start the project directly through npm run dev, and npm run build executes the package.

Previously, it was a globally installed parcel. In practice, it is more recommended to add dependencies to the project.

npm install parcel-bundler -S

The above is A traditional page, using the css introduced by link

Since it is to be transformed into a modular project, you only need to introduce a main.js, and then introduce other css and js files in main.js

So you need to use ES6 syntax such as import, then install a babel

npm install babel-preset-env -S

Then create a .babelrc file in the root directory and add the following configuration:

{
 "presets": ["env"]
}

Install a css conversion Tools, such as autoprefixer

npm install postcss-modules autoprefixer -S

Create .postcssrc file:

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

The official document also recommends a plug-in PostHTML that compiles html resources, but there is no need to

self-transformation for the time being. Code, finally npm run build package

You can see that js and css have been integrated, and its content has also been compiled by babel and autoprefixer

3. Use Parcel in the Vue project

The official document gives the formula suitable for react projects

But I usually use vue. After studying for a long time, I finally found the method

Still using index.html as the entry, and script Introduce main.js:

<!-- index.html -->

 <p></p>
 <script></script>


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

Here I would like to recommend a very powerful plug-in parcel-plugin-vue, which allows parcel and vue to successfully join hands

Coupled with the babel and autoprefixer mentioned earlier, The final package.json is like this:

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

Be sure to remember to create .postcssrc and .babelrc files in the root directory

Then npm install installs dependencies, npm run dev starts the project, npm run build packages the project.

Related recommendations:

Detailed examples of batch downloading and packaging of files in Vue

Installation and basic packaging usage of webpack Detailed explanation of command parameters

How to package vue projects into static files

The above is the detailed content of Parcel.js and Vue 2.x extremely fast zero-configuration packaging experience example. For more information, please follow other related articles on the PHP Chinese website!