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

DevinWell1ee發表於2019-03-01

特性

  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

相關文章