在Parcel.js + Vue 2.x中如何做到極速零配置打包-js教程-PHP中文網

首頁

web前端

js教程

在Parcel.js + Vue 2.x中如何做到極速零配置打包

亚连

Jun 15, 2018 pm 05:30 PM

vue

這篇文章主要介紹了Parcel.js Vue 2.x 極速零配置打包體驗的相關資料,需要的朋友可以參考下

繼Browserify、Webpack 之後，又一款打包工具Parcel 橫空出世

Parcel.js 的官網有這樣的自我介紹「極速零設定Web應用程式打包工具」

簡單接觸了一下，單從效率上來說，確實要比webpack 強上不少，可坑也蠻多，未來升級之後應該會逐漸普及

官方文件：https://parceljs.org/getting_started.html

官方GitHub：https://github .com/parcel-bundler/parcel

一、基本用法

Parcel 可以用npm 或yarn 安裝，個人習慣用npm，這篇部落格將基於npm 講解

首先需要全域安裝Parcel.js // 目前版本1.3.0

npm install -g parcel-bundler

然後寫一個設定檔...不對，這不是webpack，這是parcel ，零配置打包

直接建立專案目錄，用寫個一個簡單的傳統頁面

然後在專案根目錄中開啟命令列工具，輸入以下命令

parcel index.html -p 3030

然後在瀏覽器中開啟http://localhost:3030/ 就能開啟剛才開發的頁面

上面的指令中-p 用於設定埠號，如果不設置，則預設啟動1234 埠

parcel 支援熱更新，會監聽html、css、js 的改變並即時渲染

#// 實際上透過src 引入的css、js 無法熱更新

開發完成後，輸入以下指令進行打包

parcel build index.html

打包後會產生dist 目錄

橋豆麻袋，說好的打包呢？怎麼還是這麼多文件？

騷年莫急，這是用傳統寫法寫的頁面，連package.json 都沒有，接下來改造成模組化的項目，就能看到打包的效果了

好吧，那我先手動打開index.html 看看效果...等等...為啥css 沒被載入？

這是因為打包後的路徑都是絕對路徑，放在伺服器上沒問題，如果需要本地打開，就得手動修改為相對路徑

二、應用在模組化專案中

正片開始，首先將上面的專案改造成模組化專案

透過npm init -y 指令建立一個預設的package.json，並修改啟動和打包指令

這樣就可以直接透過npm run dev 啟動項目，npm run build 執行打包了

之前是全域安裝的parcel，實戰中更建議在專案中加入依賴

npm install parcel-bundler -S

上面是一個傳統頁面，使用link 引入的css

既然要改造為模組化項目，那就只需要引入一個main.js，然後在main.js 中引入其他的css 和js 檔案

所以需要用到import 等ES6 語法，那就安裝一個babel 吧

npm install babel-preset-env -S

然後在根目錄建立一個.babelrc 文件，新增以下設定：

{
 "presets": ["env"]
}

再安裝一個css 轉換工具，例如autoprefixer

npm install postcss-modules autoprefixer -S

建立.postcssrc 檔案：

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

官方文件也推薦了一款編譯html 資源的外掛PostHTML，不過這裡暫時不需要

自行改造程式碼，最後npm run build 包裝

可以看到js 和css 已經整合，其內容也經過了babel 和autoprefixer 的編譯

#三、在Vue 專案中使用Parcel

官方文件給了適用於react 專案的配方

但我常用的是vue，研究了好久，終於找到了方法

依舊使用index.html 作為入口，以script 引入main .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)
})

這裡要推薦一個很厲害的插件parcel-plugin-vue，它讓parcel 和vue 成功牽手

再加上之前提到的babel、autoprefixer，最後的package.json 是這樣的：

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

一定記得在根目錄創建.postcssrc 和.babelrc 文件

然後npm install 安裝依賴， npm run dev 啟動項目，npm run build 打包項目

上面是我整理給大家的，希望今後對大家有幫助。

在Vue中設定背景圖片

如何解決vue打包後靜態資源圖片失效的問題

如何把vue-router和express專案部署到伺服器上去

#在Vue 2.5.2下使用axios express本地請求404的解決方法

使用vue和react來實作展開收起等效果

#在vue中如何實作webpack打包最佳化

詳細解說vue編碼風格

以上是在Parcel.js + Vue 2.x中如何做到極速零配置打包的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles