Web Front-end
JS Tutorial
Parcel.js and Vue 2.x extremely fast zero-configuration packaging experience example
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 -->
<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
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!
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 implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
Oracle DECODE function detailed explanation and usage examples
Mar 08, 2024 pm 03:51 PM
The DECODE function in Oracle is a conditional expression that is often used to return different results based on different conditions in query statements. This article will introduce the syntax, usage and sample code of the DECODE function in detail. 1. DECODE function syntax DECODE(expr,search1,result1[,search2,result2,...,default]) expr: the expression or field to be compared. search1,
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
Go language indentation specifications and examples
Mar 22, 2024 pm 09:33 PM
Indentation specifications and examples of Go language Go language is a programming language developed by Google. It is known for its concise and clear syntax, in which indentation specifications play a crucial role in the readability and beauty of the code. effect. This article will introduce the indentation specifications of the Go language and explain in detail through specific code examples. Indentation specifications In the Go language, tabs are used for indentation instead of spaces. Each level of indentation is one tab, usually set to a width of 4 spaces. Such specifications unify the coding style and enable teams to work together to compile
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
