search

Home  >  Article  >  Web Front-end  >  Detailed explanation of how Vue configures packaging tools

Detailed explanation of how Vue configures packaging tools

亚连
亚连Original
2018-06-11 17:31:272713browse

This article mainly introduces the detailed explanation of Vue's fast zero-configuration packaging tool-parcel. Now I share it with you and give it as a reference.

This article introduces Vue's fast zero-configuration packaging tool - parcel, and shares it with everyone. The details are as follows:

Features

  1. ##Quick Packaging

  2. Package all resources

  3. Automatic conversion

  4. Code splitting

  5. Hot module replacement

  6. Friendly error logging

How it works

Parcel converts the resource tree into a bundle tree. Many other packaging tools are basically based on JavaScript resources, with resources in other formats attached to them. For example, inline into a string in a JS file. Parcel is file type agnostic, it can work with any type of resource the way you expect, and requires no configuration.

Build resource tree

Parcel accepts a single entry resource as input, which can be of any type: JS, HTML, CSS, image files, etc. There are many different resource types defined in Parcel, which knows how to handle specific file types. Resources will be parsed, resource dependencies will be extracted, and resources will be converted into the final compiled form. This process creates a resource tree.

Building the file bundle tree

Once the resource tree is built, the resources will be placed in the file bundle tree. First, an entry resource will be created into a file bundle, and then dynamic import() will be created into a sub-file bundle, which triggers code splitting. When file resources of different types are introduced, sibling file bundles are created. For example, if you introduce a CSS file into JavaScript, it will be placed in a sibling file bundle corresponding to the JavaScript file. If a resource is referenced by more than one bundle, it is promoted to the nearest common ancestor in the bundle tree so that the resource is not bundled multiple times.

Packaging

After the file bundle tree is built, each file bundle will be written by the packager to a file of a specific file type. Packagers know how to combine code from each resource into a file that is ultimately loaded by the browser.

Configuration

Initialization project

 npm install -g parcel
 mkdir xxx && cd xxx && npm init -y

Conversion

Babel

npm install babel-preset-env --save-dev

Root directory configuration.babelrc

 {
  "presets": ["env"]
 }

PostCSS

npm install postcss-modules autoprefixer --save-dev

Root directory configuration.postcssrc

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

Support vue

npm install parcel-plugin-vue --save-dev

Add entry

 import App from './App.vue'
 import router from './router/index.js'
 import './assets/js/rem.js'
 window.onload = () => {
  const vm = new Vue({
   el: '#app',
   router,
   render: h => h(App)
  })
 }

Configuration index.html

 <body>
  <p id="app"></p>
  <script src="入口文件"></script>
 </body>

Configure routing (code splitting - lazy loading)

 {
   path: &#39;home&#39;,
   component: () =>import(&#39;../pages/home.vue&#39;)
 }

import() returns a promise, so you can also use async/await syntax when you want to use async/await syntax locally. , please introduce babel-polyfill

to distinguish the production environment and development environment, configure package.json.

dev --- development environment

build --- production environment

 "scripts": {
   "dev": "parcel index.html -p 3700",
   "build": "parcel build index.html"
  }

Done

Visit http://localhost:3700/home

This demo is completed by vue parcel grid stylus: parcel-vue

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

Related articles:

How to get the value in select in vue.js (detailed tutorial)

How to get it in Vue Use slot to implement slot distribution content

How to encapsulate reusable components in vue

How to determine the date and time difference in JavaScript

How to change the props value in the vue2.0 child component and pass the value to the parent component

The above is the detailed content of Detailed explanation of how Vue configures packaging tools. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json css vue.js stylus html 封装 select 字符串 JS promise http
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 package using ParcelNext article：How to package using Parcel

Related articles

See more