Vue嚐鮮快速、零配置的打包工具---parcel~

dxhsmwqc發表於2018-01-15
Vue

特性

  1. 快速打包
  2. 打包所有資源
  3. 自動轉換
  4. 程式碼拆分
  5. 模組熱替換
  6. 友好的錯誤記錄

如何工作

Parcel 將 資源 樹轉換成 包(bundles) 樹。許多其它的打包工具基本上是基於 JavaScript 資源，還有附加在其上的其它格式的資源。例如，在 JS 檔案中內聯成字串。 Parcel是對檔案型別無感知的，它能按你所期待的方式那樣與任意型別的資源工作，且毋須配置。
  構建資源樹
  Parcel 接受單個入口資源作為輸入，可以是任意型別：JS、HTML、CSS、圖片檔案等等。在 Parcel 中定義了許多不同的資源型別，它知道如何去處理特定的檔案型別。資源會被解析，資源的依賴會被提取，資源會被轉換成最終編譯好的形態。此過程建立了一個資源樹。
  構建檔案束樹
  一旦資源樹被構建好，資源會被放置在檔案束樹中。首先一個入口資源會被建立成一個檔案束，然後動態的 import() 會被建立成子檔案束 ，這引發了程式碼的拆分。當不同型別的檔案資源被引入，兄弟檔案束就會被建立。例如你在 JavaScript 中引入了 CSS 檔案，那它會被放置在一個與 JavaScript 檔案對應的兄弟檔案束中。如果資源被多於一個檔案束引用，它會被提升到檔案束樹中最近的公共祖先中，這樣該資源就不會被多次打包。
  打包
  在檔案束樹被構建之後，每個檔案束都會被 packager 寫到一個特定檔案型別的檔案中。packagers 知道如何從每個資源中將程式碼合併起來，生成到最終被瀏覽器載入的檔案中。   

配置

  1. 初始化專案

     npm install -g parcel
 mkdir xxx && cd xxx && npm init -y
複製程式碼

  2. 轉換

    Babel

     npm install babel-preset-env --save-dev
複製程式碼

    根目錄配置.babelrc

     {
   "presets": ["env"]
 }
複製程式碼

    PostCSS

     npm install postcss-modules autoprefixer --save-dev
複製程式碼

    根目錄配置.postcssrc

     {
   "modules": true,
   "plugins": {
     "autoprefixer": {
       "grid": true
     }
   }
 }
複製程式碼

  3. 支援vue

     npm install parcel-plugin-vue --save-dev
複製程式碼

  4. 新增entry

     import App from './App.vue'
 import router from './router/index.js'
 import './assets/js/rem.js'
 window.onload = () => {
   const vm = new Vue({
     el: '#app',
     router,
     render: h => h(App)
   })
 }
複製程式碼

  5. 配置index.html

     <body>
   <div id="app"></div>
   <script src="入口檔案"></script>
 </body>
複製程式碼

  6. 配置路由(程式碼拆分--懶載入)

     {
     path: 'home',
     component: () =>import('../pages/home.vue')
 }
複製程式碼

    import()返回的是一個promise,所以也可以用 async/await 語法，當你想在本地使用 async/await 語法，請引入 babel-polyfill

  7. 區分生產環境和開發環境，配置package.json.

    dev --- 開發環境

    build --- 生產環境

     "scripts": {
     "dev": "parcel index.html -p 3700",
     "build": "parcel build index.html"
   }
複製程式碼

大功告成

訪問http://localhost:3700/home

pJkErR.jpg

此demo是vue + parcel + grid +stylus完成 : parcel-vue

相關文章