Web Front-end
JS Tutorial
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
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 '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
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.
Related articles:
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to add functions to buttons for vue
Apr 08, 2025 am 08:51 AM
You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.
How to use watch in vue
Apr 07, 2025 pm 11:36 PM
The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.
What does vue multi-page development mean?
Apr 07, 2025 pm 11:57 PM
Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.
How to reference js file with vue.js
Apr 07, 2025 pm 11:27 PM
There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.
How to return to previous page by vue
Apr 07, 2025 pm 11:30 PM
Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.
How to use vue traversal
Apr 07, 2025 pm 11:48 PM
There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values for each element; and the .map method can convert array elements into new arrays.
How to jump to the div of vue
Apr 08, 2025 am 09:18 AM
There are two ways to jump div elements in Vue: use Vue Router and add router-link component. Add the @click event listener and call this.$router.push() method to jump.
