Parcel + Vue 2.x 極速零配置打包體驗

時間 2019-11-21

標籤 parcel vue 2.x 配置打包體驗简体版

原文原文鏈接

繼 Browserify、Webpack 以後，又一款打包工具 Parcel 橫空出世css

Parcel.js 的官網有這樣的自我介紹「極速零配置Web應用打包工具」html

簡單接觸了一下，單從效率上來講，確實要比 webpack 強上很多，可坑也挺多，將來升級以後應該會逐漸普及vue

官方文檔：https://parceljs.org/getting_started.htmlreact

官方 GitHub：https://github.com/parcel-bundler/parcelwebpack

1、基本用法git

Parcel 能夠用 npm 或 yarn 安裝，我的習慣用 npm，這篇博客將基於 npm 講解github

首先須要全局安裝 Parcel.js // 當前版本 1.3.0
web

npm install -g parcel-bundler

而後寫一個配置文件...不對，這不是 webpack，這是 parcel，零配置打包
vue-router

直接建立項目目錄，用寫個一個簡單的傳統頁面npm

而後在項目根目錄打開命令行工具，輸入如下命令

parcel index.html -p 3030

而後在瀏覽器中打開 http://localhost:3030/ 就能打開剛纔開發的頁面

上面的命令中 -p 用於設置端口號，若是不設置，則默認啓動 1234 端口

parcel 支持熱更新，會監聽 html、css、js 的改變並即時渲染

// 實際上經過 src 引入的 css、js 沒法熱更新

開發完成後，輸入如下命令進行打包

parcel build index.html

打包後會生成 dist 目錄

橋豆麻袋，說好的打包呢？怎麼仍是這麼多文件？

騷年莫急，這是用傳統寫法寫的頁面，連 package.json 都沒有，接下來改形成模塊化的項目，就能看到打包的效果了

好吧，那我先手動打開 index.html 看看效果...等等...爲啥 css 沒被加載？

這是由於打包後的路徑都是絕對路徑，放在服務器上沒問題，若是須要本地打開，就得手動修改成相對路徑

2、應用在模塊化項目中

正片開始，首先將上面的項目改形成模塊化項目

經過 npm init -y 命令建立一個默認的 package.json，並修改啓動和打包命令

這樣就能夠直接經過 npm run dev 啓動項目，npm run build 執行打包了

以前是全局安裝的 parcel，實戰中更推薦在項目中添加依賴

npm install parcel-bundler -S

上面是一個傳統頁面，使用 link 引入的 css

既然要改造爲模塊化項目，那就只須要引入一個 main.js，而後在 main.js 中引入其餘的 css 和 js 文件

因此須要用到 import 等 ES6 語法，那就安裝一個 babel 吧

npm install babel-preset-env -S

而後在根目錄建立一個 .babelrc 文件，添加如下配置：

{
  "presets": ["env"]
}

再安裝一個 css 轉換工具，好比 autoprefixer

npm install postcss-modules autoprefixer -S

建立 .postcssrc 文件：

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

官方文檔還推薦了一款編譯 html 資源的插件 PostHTML，不過這裏暫時不須要

自行改造代碼，最後 npm run build 打包

能夠看到 js 和 css 已經整合，其內容也通過了 babel 和 autoprefixer 的編譯

3、在 Vue 項目中使用 Parcel

官方文檔給出了適用於 react 項目的配方

但我經常使用的是 vue，研究了很久，終於找到了方法

依舊使用 index.html 做爲入口，以 script 引入 main.js：

<!-- index.html -->

<body>
  <div id="app"></div>
  <script src="./src/main.js"></script>
</body>

// main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'

Vue.config.productionTip = false

const vm = new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

這裏要推薦一個很厲害的插件 parcel-plugin-vue，它讓 parcel 和 vue 成功牽手

再加上以前提到的 babel、autoprefixer，最後的 package.json 是這樣的：

{
  "name": "ParcelVue",
  "version": "1.0.0",
  "description": "The project of parcel & vue created by Wise Wrong",
  "main": "main.js",
  "scripts": {
    "dev": "parcel index.html -p 3030",
    "build": "parcel build index.html"
  },
  "keywords": [
    "parcel",
    "vue"
  ],
  "author": "wisewrong",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.3.0",
    "parcel-plugin-vue": "^1.4.0",
    "postcss-modules": "^1.1.0",
    "vue-loader": "^13.6.1",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.13"
  },
  "dependencies": {
    "vue": "^2.5.13",
    "vue-router": "^3.0.1"
  }
}

必定記得在根目錄建立 .postcssrc 和 .babelrc 文件
而後 npm install 安裝依賴， npm run dev 啓動項目，npm run build 打包項目

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。