Home > Article > Web Front-end > How to achieve extremely fast zero-configuration packaging in Parcel.js + Vue 2.x

How to achieve extremely fast zero-configuration packaging in Parcel.js + Vue 2.x

亚连Original: 2018-06-15 17:30:291616browse

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

Following Browserify and Webpack, Parcel is another packaging tool. Kong Chu Shi

The official website of Parcel.js has this self-introduction as "Extremely fast zero-configuration web application packaging tool"

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

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

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

1. Basic usage

Parcel can be installed using npm or yarn. I am used to using npm. This is 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

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 not set, the 1234 port will be started by default

parcel supports hot update, 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

After the development is completed, Enter the following command to package

parcel build index.html

The dist directory will be generated after packaging

Qiaodou sack, what about 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

II , applied in modular projects

Start the main film, first transform the above project into a modular project

Through thenpm init -y command Create a default package.json and modify the startup and packaging commands

so that you can directly start the project through npm run dev , npm run build execute the packaging

Before, it was a globally installed parcel. In actual practice, it is recommended to add dependencies in the project.

npm install parcel-bundler -S

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

Since it needs to be transformed into a module project, then 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 tool, such as autoprefixer

npm install postcss-modules autoprefixer -S

Create a .postcssrc file:

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

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

modify the code by yourself for the time being. Finally, npm run build Packaging

can See that js and css have been integrated, and their content has been compiled by babel and autoprefixer

3. Use Parcel in the Vue project

The official document gives a formula suitable for react projects

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

Still using index.html as the entry and introducing main with script .js:

<!-- index.html -->
<body>
 <p id="app"></p>
 <script src="./src/main.js"></script>
</body>

// main.js

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./css/common.css&#39;

Vue.config.productionTip = false

const vm = new Vue({
 el: &#39;#app&#39;,
 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

In addition to the previously mentioned babel and autoprefixer, 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 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Set background images in Vue

How to solve the problem of invalid static resource images after vue packaging

How to deploy vue-router and express projects to the server

Solution to using axios express local request 404 under Vue 2.5.2

Use vue and react to achieve expansion, collapse and other effects

How to implement webpack packaging optimization in vue

Detailed explanation of vue coding style

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JSONAPI in PHPNext article：How to use JSONAPI in PHP

See more

How to achieve extremely fast zero-configuration packaging in Parcel.js + Vue 2.x

Related articles