自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Parcel：常見技術棧的集成方式

作者：林鑫
開發(fā) 開發(fā)工具
Parcel 是一個前端構建工具，Parcel 官網 將它定義為極速零配置的Web應用打包工具。沒錯，又是一個構建工具，你一定會想，為什么前端的構建工具層出不窮，搞那么多工具又要花時間去學習，真的有意義嗎？在 webpack 已經成為前端構建工具主流的今天，一個新的工具能有什么優(yōu)勢來站穩(wěn)腳跟呢？

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

[[215124]]

前言

為什么要用 Parcel

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

Parcel 的特性

  • 快速打包：啟用多核編譯，并具有文件系統(tǒng)緩存
  • 打包所有資源：支持JS，CSS，HTML，文件資源等等 - 不需要安裝任何插件
  • 自動轉換：使用 Babel，PostCSS 和 PostHTML 自動轉換
  • 零配置代碼拆分：使用動態(tài) 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 以上的版本才支持

集成技術棧

首先在項目下創(chuàng)建 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

生產環(huán)境

  • 設置環(huán)境變量： 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
  • 禁用文件系統(tǒng)緩存： parcel build index.html --no-cache

疑問

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

前端情報局

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

【本文為51CTO專欄作者“林鑫”的原創(chuàng)稿件，轉載請通過微信公眾號聯(lián)系作者獲取授權】

戳這里，看該作者更多好文

 

責任編輯：武曉燕 來源： 51CTO專欄
Parcel集成方式
相關推薦

2025-02-27 00:00:30

SpringJava方式

2023-03-14 18:06:07

flink數(shù)字集成

2022-09-15 23:58:51

機器學習集成數(shù)據

2023-12-09 17:04:26

nDPIHyperscan

2022-09-06 15:00:09

機器學習集成數(shù)據集

2023-03-17 16:30:15

云集成架構組件

2009-12-29 10:32:24

WPF Listbox

2009-06-25 17:24:06

Hibernate主鍵

2009-12-29 13:56:07

DSL技術

2009-11-26 13:11:24

PHP字符串

2009-07-14 13:08:55

WebWork與Spr

2019-05-16 09:28:12

集成學習機器學習模型

2022-11-15 11:04:12

2023-08-08 14:56:27

ParcelRustDemo

2018-01-26 08:26:35

RAID陣列組成

2009-07-21 12:59:25

Scala標識符

2013-05-27 11:14:34

IT地址IP地址組成局域網IP

2013-01-30 15:45:34

普元SOA

2016-01-22 10:53:09

前端APP融合

2023-05-07 07:56:53

Python棧方式
點贊
收藏

51CTO技術棧公眾號