日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Parcel：常見技術棧的集成方式

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

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站設計、成都做網(wǎng)站、上蔡網(wǎng)絡推廣、重慶小程序開發(fā)公司、上蔡網(wǎng)絡營銷、上蔡企業(yè)策劃、上蔡品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供上蔡建站搭建服務，24小時服務熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

前言

為什么要用 Parcel

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

Parcel 的特性

  • 快速打包：啟用多核編譯，并具有文件系統(tǒng)緩存
  • 打包所有資源：支持JS，CSS，HTML，文件資源等等 - 不需要安裝任何插件
  • 自動轉(zhuǎn)換：使用 Babel，PostCSS 和 PostHTML 自動轉(zhuǎn)換
  • 零配置代碼拆分：使用動態(tài) import() 語法拆分您的輸出包，只加載初始加載時所需的內(nèi)容
  • 模塊熱替換：不需要進行任何配置
  • 友好的錯誤記錄：以語法高亮的形式打印的代碼幀，以幫助你查明問題

如何使用

快速使用

全局安裝 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.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.      
    5.   
  
  
  5.         Parcel 
    6.   
  
  
  6.          
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.         
    Hello Parcel
     
    10.   
  
  
  10.          
    11.   
  
  
  11.      
    12.   
  
  
  12.  
    13.  
 
 
 
 
 
    
  
  
  
  1. // src/js/index.js 
    2.   
  
  
  2. const main1 = require('./main1.js');    // 支持 CommonJS 模塊語法 
    3.   
  
  
  3. import main2 from './main2.js';         // 支持 ES6 模塊語法 
    4.   
  
  
  4. import '../css/index.css';              // 支持在 js 中導入 css 
    5.   
  
  
  5. main1(); 
    6.   
  
  
  6. main2(); 
    7.

上面只是簡單的使用了 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.   
  
  
  2.   "react": "parcel index-react.html", 
    3.   
  
  
  3.   "vue": "parcel index-vue.html", 
    4.   
  
  
  4.   "ts": "parcel index-ts.html" 
    5.   
  
  
  5. } 
    6.

React

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

在 .babelrc 中添加

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

這就是上面講到的 Parcel 的特性：自動轉(zhuǎn)換。該文件是讓 Parcel 自動轉(zhuǎn)換 ES6 和 React JSX。

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.      
    5.   
  
  
  5.         Parcel React 
    6.   
  
  
  6.          
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.         
 
  •          
  •      
  •  

    • 運行命令 npm run react 打開 http://localhost:1234/ 即可看到 Hello React

    Vue

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

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.      
      5.   
  
  
    5.         Parcel Vue 
      6.   
  
  
    6.          
      7.   
  
  
    7.      
      8.   
  
  
    8.      
      9.   
  
  
    9.         
     
  •          
  •      
  •  
    •  
 
 
      
  
  
  
    1. // src/vue/index.js 
      2.   
  
  
    2. import Vue from 'vue'; 
      3.   
  
  
    3. import App from './app.vue'; 
      4.   
  
  
    4. new Vue({ 
      5.   
  
  
    5.     el: '#vue-app', 
      6.   
  
  
    6.     render: h => h(App) 
      7.   
  
  
    7. }) 
      8.  
 
 
     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.

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

    TypeScript

    集成 TypeScript 也非常簡單，只需要安裝 typescript 模塊即可，也無需配置。

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.      
      5.   
  
  
    5.         Parcel TypeScript 
      6.   
  
  
    6.          
      7.   
  
  
    7.      
      8.   
  
  
    8.      
      9.   
  
  
    9.          
      10.   
  
  
    10.          
      11.   
  
  
    11.      
      12.   
  
  
    12.  
      13.  
 
 
     
 
 
      
  
  
  
    1. interface Name { 
      2.   
  
  
    2.     value: string; 
      3.   
  
  
    3. } 
      4.   
  
  
    4. function showName(name: Name){ 
      5.   
  
  
    5.     document.getElementById('ts-app').innerHTML = 'Hello ' + name.value; 
      6.   
  
  
    6. } 
      7.   
  
  
    7. showName({value: 'TypeScript'}); 
      8.

    運行命令 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.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     @import '../sass/main.scss'; 
      5.   
  
  
    5.  
      6.  
 
 
     
 
 
      
  
  
  
    1. .main{ 
      2.   
  
  
    2.     h1{ 
      3.   
  
  
    3.         color: #0099ff; 
      4.   
  
  
    4.     } 
      5.   
  
  
    5. } 
      6.

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

    以上的 demo 源碼地址：parcel-demo

    生產(chǎn)環(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 都替我們做好了，對于使用者來說，基本上也是零配置了。

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


    標題名稱：Parcel：常見技術棧的集成方式
    瀏覽路徑：http://m.5511xx.com/article/dphsged.html