2. 程式人生 > >Parcel 提供了Vue Plugin

Parcel 提供了Vue Plugin

阿新 • • 發佈：2018-12-20

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。

Parcel 是一個前端構建工具，Parcel 官網 將它定義為極速零配置的Web應用打包工具。沒錯，又是一個構建工具，你一定會想，為什麼前端的構建工具層出不窮，搞那麼多工具又要花時間去學習，真的有意義嗎？在 webpack 已經成為前端構建工具主流的今天，一個新的工具能有什麼優勢來站穩腳跟呢？

前言

為什麼要用 Parcel

一個好的打包工具在前端工程中佔著比較重要的地位。然，何謂之好？或功能強大，或簡單易用，或提高效率，或適合自己。在時代不斷髮展中，一個個好的工具正在被一個更好的工具所替代。隨著對 webpack 複雜配置的吐槽聲越來越多，Parcel 打著 “快速、零配置” 的旗子出來了。

Parcel 的特性

  • 快速打包：啟用多核編譯，並具有檔案系統快取
  • 打包所有資源：支援JS，CSS，HTML，檔案資源等等 - 不需要安裝任何外掛
  • 自動轉換：使用 Babel，PostCSS 和 PostHTML 自動轉換
  • 零配置程式碼拆分：使用動態 import() 語法拆分您的輸出包，只加載初始載入時所需的內容
  • 模組熱替換：不需要進行任何配置
  • 友好的錯誤記錄：以語法高亮的形式列印的程式碼幀，以幫助你查明問題

如何使用

快速使用

全域性安裝 npm i parcel-bundler -g 或 yarn add parcel-bundler global

Parcel 使用一個檔案作為入口，最好是 HTML 或 JavaScript 檔案，我們在專案中新建 index.html 檔案，直接執行命令 parcel index.html 即可啟動本地伺服器

在瀏覽器中訪問 http://localhost:1234/ ，可以通過 parcel index.html -p 8888 重新設定埠號。

無需配置檔案！

Parcel 支援 CommonJS 模組語法、ES6 模組語法、在 js 檔案中匯入 node 模組或 css、在 css 中使用 import 等，也都無需配置檔案！

 
  1. <!-- index.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"> 
  4.     <head> 
  5.         <title>Parcel</title> 
  6.         <meta charset="UTF-8"> 
  7.     </head> 
  8.     <body> 
  9.         <h1>Hello Parcel</h1> 
  10.         <script src="src/js/index.js"></script> 
  11.     </body> 
  12. </html> 
 
  1. // src/js/index.js 
  2. const main1 = require('./main1.js');    // 支援 CommonJS 模組語法 
  3. import main2 from './main2.js';         // 支援 ES6 模組語法 
  4. import '../css/index.css';              // 支援在 js 中匯入 css 
  5. main1(); 
  6. main2(); 

上面只是簡單的使用了 Parcel，但在實際專案中，我們會用到各種技術棧，下面我們來看看 Parcel 如何整合各種技術棧的。

注意：Parcel 裡使用了 async await，因此需要 node 7.6 以上的版本才支援

整合技術棧

首先在專案下建立 package.json 、.babelrc、以及 index-react.html、index-vue.html、index-ts.html 三個作為各自技術棧 demo 的入口檔案。

在 package.json 中新增以下命令

 
  1. "scripts": { 
  2.   "react": "parcel index-react.html", 
  3.   "vue": "parcel index-vue.html", 
  4.   "ts": "parcel index-ts.html" 
  5. } 

React

安裝 React 的相關依賴 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中新增

 
  1. { 
  2.   "presets": ["env","react"] 
  3. } 

這就是上面講到的 Parcel 的特性：自動轉換。該檔案是讓 Parcel 自動轉換 ES6 和 React JSX。

 
  1. <!-- index-react.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"> 
  4.     <head> 
  5.         <title>Parcel React</title> 
  6.         <meta charset="UTF-8"> 
  7.     </head> 
  8.     <body> 
  9.         <div id="react-app"></div> 
  10.         <script src="src/react/index.js"></script> 
  11.     </body> 
  12. </html> 

執行命令 npm run react 開啟 http://localhost:1234/ 即可看到 Hello React

Vue

就在不久前，Parcel 終於支援 .vue 檔案了，只需要引入一個包 parcel-plugin-vue，不需要任何配置，即可打包 Vue 了。

安裝 Vue 相關依賴，npm i -S vue parcel-plugin-vue

 
  1. <!-- index-vue.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"> 
  4.     <head> 
  5.         <title>Parcel Vue</title> 
  6.         <meta charset="UTF-8"> 
  7.     </head> 
  8.     <body> 
  9.         <div id="vue-app"></div> 
  10.         <script src="src/vue/index.js"></script> 
  11.     </body> 
  12. </html> 
 
  1. // src/vue/index.js 
  2. import Vue from 'vue'; 
  3. import App from './app.vue'; 
  4. new Vue({ 
  5.     el: '#vue-app', 
  6.     render: h => h(App) 
  7. }) 
 
  1. <!-- src/vue/app.vue --> 
  2. <template> 
  3.     <div> 
  4.         <h1>Hello Vue</h1> 
  5.     </div> 
  6. </template> 

執行命令 npm run vue 開啟 http://localhost:1234/ 即可看到 Hello Vue

TypeScript

整合 TypeScript 也非常簡單，只需要安裝 typescript 模組即可，也無需配置。

安裝 TypeScript 相關依賴，npm i -S typescript

 
  1. <!-- index-ts.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"> 
  4.     <head> 
  5.         <title>Parcel TypeScript</title> 
  6.         <meta charset="UTF-8"> 
  7.     </head> 
  8.     <body> 
  9.         <h1 id="ts-app"></h1> 
  10.         <script src="src/typescript/index.ts"></script> 
  11.     </body> 
  12. </html> 
 
  1. interface Name { 
  2.     value: string; 
  3. } 
  4. function showName(name: Name){ 
  5.     document.getElementById('ts-app').innerHTML = 'Hello ' + name.value; 
  6. } 
  7. showName({value: 'TypeScript'}); 

執行命令 npm run ts 開啟 http://localhost:1234/ 即可看到 Hello TypeScript

Sass

將 Sass 在上面技術棧中使用也非常簡單，只需要安裝 node-sass 模組即可，也無需配置。

安裝 Sass 相關依賴，npm 可能會下載不成功，這裡使用 cnpm 來安裝，cnpm i -S node-sass

在 src/vue/app.vue 中來使用 Sass

 
  1. <!-- src/vue/app.vue --> 
  2. <template> 
  3.     <div class="main"> 
  4.         <h1>Hello Vue</h1> 
  5.     </div> 
  6. </template> 
  7. <style lang="scss"> 
  8.     @import '../sass/main.scss'; 
  9. </style> 
 
  1. .main{ 
  2.     h1{ 
  3.         color: #0099ff; 
  4.     } 
  5. } 

再次執行命令 npm run vue 即可看到帶有藍色字型的 Hello Vue

以上的 demo 原始碼地址：parcel-demo

生產環境

  • 設定環境變數： parcel build index.html NODE_ENV=production
  • 設定輸出目錄： parcel build index.html -d build/output
  • 設定要提供服務的公共 URL： parcel build index.html --public-url ./
  • 禁用壓縮： parcel build index.html --no-minify
  • 禁用檔案系統快取： parcel build index.html --no-cache

疑問

  • 輸出目錄裡是否可以再分子目錄，例如 css / js / img 等？
  • 頁面引用的 html 被打包後也會重新命名成很長的一串，是否可以不重新命名？

前端情報局

鑑於最近 Parcel 打著零配置的口號俘獲了不少前端開發者的心，並且伴隨著吐槽 webpack 使用配置複雜的聲音。webpack 核心開發者特意解釋道，webpack v4.0.0-alpha.1 中加入了 mode 這個配置，這使得很多複雜繁瑣的配置（諸如： sourcemaps、 tree shaking,、minification、scope hoisting）webpack 都替我們做好了，對於使用者來說，基本上也是零配置了。

原文連結：http://zhuanlan.51cto.com/art/201712/562415.htm

Fundebug提供JavaScript監控，支援所有主流前端框架，微信小程式監控，微信小遊戲監控，後端Node.js監控。

 

相關推薦

Parcel 提供了Vue Plugin

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。 Parcel 是一個前端構建工具，Parcel 官網 將它定義為極速零配置的Web應用打包工具。沒錯，又

vue v-model後面的修飾符。去掉收尾空白的字元。 v-on 提供了事件修飾符，不過載

.trim 如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符： <input v-model.trim="msg"> 如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符：

提供了對GoogleProtobuf二進制序列化框架的支持

lin 最大的 都在 調用 定性 多線程模型 所有 數據 ftp 第一層：Reactor通信調度層。該層的主要職責就是監聽網絡的連接和讀寫操作，負責將網絡層的數據讀取到內存緩沖區中，然後觸發各種網絡事件，例如連接創建、連接激活、讀事件、寫事件等，將這些事件觸發到Pipeli

MyBatis之簡單了解Plugin

mybatisMyBatis的Configuration配置中有一個Plugin配置，根據其名可以解釋為“插件”，這個插件實質可以理解為“攔截器”。“攔截器”這個名詞不陌生，在眾多框架中均有“攔截器”。這個Plugin有什麽用呢？活著說攔截器有什麽用呢？可以想想攔截器是怎麽實現的。Plugin用到了Java中

WebDriver提供了executeScript()方法來執行JavaScript代碼

executescript()方法WebDriver提供了executeScript()方法來執行JavaScript代碼業務場景：打開百度網頁，隱藏百度一下按鈕，因為裏面涉及到按鈕的屬性，所以要用js.方法：（JavascriptExecutor）driver.executesScript();本文出自 “

Java BigDecimal詳解，提供了豐富的四舍五入規則

字節 equals mat hashcode 字符 plain move man gnu java.math.BigDecimal類提供用於算術，刻度操作，舍入，比較，哈希算法和格式轉換操作。 toString()方法提供BigDecimal的規範表示。它使用戶可以完全控制

[ 原創 ]AVA反射機制主要提供了以下哪些功能？

gree clas 對象 -c border pre class color 成員變量 AVA反射機制主要提供了以下哪些功能？ 在運行時判斷一個對象所屬的類 在運行時構造一個類的對象 在運行時判斷一個類所具有的成員變量和方法 在運行時調用一個對象的方法 [ 原

spring boot: 一般註入說明(五) @Component, application event事件為Bean與Bean之間通信提供了支持

listen source 監聽 監聽器 nbsp lis 所有 fin 配置 spring的事件，為Bean與Bean之間通信提供了支持，當一個Bean處理完成之後，希望另一個Bean知道後做相應的事情，這時我們就讓另外一個Bean監聽當前Bean所發送的事件。 spri

更新了vue-cli到最新版本後引發的問題： require和import、vue-loader的問題

什麽 import 都是 作者 降級 info 第三方 默認 ges 結局：[email protected] 降級到 [email protected] 即可解決 先來說一下export default 與 require 和 import 的關系通過export defau

SAP雲平臺以微服務的方式提供了Document的CRUD(增刪改查)操作。該微服務基於標準的CMI

SAP. SCP SAP雲平臺 DocumentService 微服務 SAP雲平臺以微服務的方式提供了Document的CRUD(增刪改查)操作。該微服務基於標準的CMIS協議(Content Management Interoperability Service)。 同標準的CMI

谷歌在安卓P版本中已經提供了統一的適配方滴滴回應：核實後

不存在 業務 tensor 面試 log usb code 軟件 wing 本文主要介紹有權圖中的最短路徑問題,由於Dijksra算法是廣度優先搜索的改進算法,所以本文先介紹一下普通的bfs算法。 一BFS算法 說到BFS算法,其實普 JAVA平臺提供了兩個類:Sring和

JNDI提供了一種統一的方式，可以用在網絡上查找和訪問服務

示例 jdb 數據庫 alc 應用程序 名稱 context ext aso JNDI提供了一種統一的方式，可以用在網絡上查找和訪問服務。通過指定一個資源名稱，該名稱對應於數據庫或命名服務中的一個記錄，同時返回數據庫連接建立所必須的信息。 JNDI主要有兩部分組成：應用程序

JNDI架構提供了一組標準的獨立於命名系統的API

vid 使用 jdb AMM 其他 spi face 我們 ice JNDI架構提供了一組標準的獨立於命名系統的API，這些API構建在與命名系統有關的驅動之上。這一層有助於將應用與實際數據源分離，因此不管應用訪問的是LDAP、RMI、DNS、還是其他的目錄服務。換句話說，

[數據庫]Sql server 數據庫的備份和還原____還原數據庫提示“介質集有2個介質簇,但只提供了1個。必須提供所有成員”

安裝目錄 data 任務 最好 保存 過程 alt 結構 導入數據 在對數據庫備份與還原的過程中，我遇到一個問題“介質集有2個介質簇,但只提供了1個。必須提供所有成員”，下面詳細的介紹一下遇到問題的經過與問題解決的方法！ 一、備份與還原遇到的

案例四：銀行提供了整存整取定期儲蓄業務，其存期分為一年、兩年、三年、五年，到期憑存單支取本息。年利率如下表。試編寫一個程序，輸入存入的本金數目，計算假設存一年、兩年、三年、五年，到期取款時，銀行應支付的本息分別是多少。

[] .com 分別是 auth sca pac color () jpg 年利率 存期 年利率 一年 2.25% 兩年 2.7% 三年 3.24% 五年 3.6% package project_04; imp

看了vue文檔之後。。。。

基於 忽略 html area fit 全局 創建 對象 然而 對於任何復雜邏輯，你都應當使用計算屬性 html中的雙花之內的值不一定來自data：{}，還有可能來自computed：{} 原數據改變，被綁定的計算屬性也會改變 可以將同一函數定義為一個方法而不是一個計算屬

selenium提供了三種模式的斷言：assert,verify,waitfor

class note ext val 沒有 radio 菜單 測試 log Assert：失敗時，該測試將終止 Verify：失敗時，該測試繼續執行，並將錯誤日誌記錄在日顯示屏 Waitfor：等待某些條件變為真，一般使用在AJAX應用程序的測試 斷言常

TensorFlow - TF-Slim 提供了關於變數的控制與管理封裝函式 - Variables.

感謝作者： http://www.aiuai.cn/aifarm316.html TensorFlow - TF-Slim 提供了關於變數的控制與管理封裝函式 - Variables. 包括變數恢復函式，如get_variables, get_variables_

歐盟為區塊鏈再添支援 歐洲議會議員表示去中心化系統提供了更多的安全保障

  馬耳他政治家兼歐洲議會議員Roberta Metsola在11月2日的馬耳他區塊鏈峰會上發表了演講。她在演講時表示，由區塊鏈驅動的去中心化系統“提供了更多的安全保障”。 Metsola在峰會上表達了歐洲議會(EP)對區塊鏈和加密貨幣等新興行業的積極立場。這位馬耳他政治家還透露說

Java BigDecimal詳解，提供了豐富的四捨五入規則

原文地址：https://www.cnblogs.com/qynprime/p/8028397.html java.math.BigDecimal類提供用於算術，刻度操作，舍入，比較，雜湊演算法和格式轉換操作。 toString()方法提供BigDecimal的規範表示。它使使用者可以完全控