parcel建立vue開發環境

parcel-vue

parcel最近超火爆的0配置web打包工具,記錄一下parcel中vue的配置

首先須要咱們初始化一個項目

mkdir parcel-vue
  cd parcel-vue
  npm init -y
複製代碼

建立文件目錄

• src
  • assets //靜態文件
  • components //.vue模塊
  • scss //css樣式
  • App.vue
  • main.js
• index.html //parcel入口文件(parcel入口文件既能夠是.html,也能夠是.js)
• package.json

添加parcel依賴

npm install -g parcel-bundler
複製代碼

npm install vue vue-router --save
複製代碼

npm install autoprefixer babel-polyfill babel-preset-env parcel-bundler parcel-plugin-vue postcss-modules vue-hot-reload-api vue-loader vue-style-loader vue-template-compiler --save-dev
複製代碼

也能夠用yarn和淘寶的cnpm

修改package.json配置

"scripts": {
    "dev": "parcel index.html -p 8080",  //-p改端口
    "build": "parcel build index.html"
  },
複製代碼

如下配置出自parcel

Babel（babel-preset-env）

Babel 是一個流行的 JavaScript 轉譯器，擁有大量的插件生態系統。在 Parcel 中使用 Babel 的方式與其單獨使用或與其餘打包器配合使用的方式相同。 而後，建立一個 .babelrc 文件：

{
    "presets": ["env"]
  }
複製代碼

PostCSS（postcss-modules autoprefixer）

PostCSS 是一個用插件轉換 CSS 的工具，好比 autoprefixer, cssnext, 和 CSS Modules。 您能夠使用如下名稱之一建立配置文件，從而使 Parcel 使用 PostCSS 配置 ： .postcssrc (JSON), .postcssrc.js, 或者 postcss.config.js. 而後，建立一個 .postcssrc 文件：

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

插件指定在 plugins 對象的 key 中，並選項定義使用對象值。 若是插件沒有選項，只需將其設置爲 true 便可。 Autoprefixer ， cssnext 和其餘工具的目標瀏覽器能夠在 .browserslistrc 文件中指定：

> 1%
  last 2 versions
複製代碼

CSS Modules 的啓用方式稍有不一樣，在頂級 modules key 上使用。這是由於 Parcel 須要對 CSS Modules 有特殊的支持，由於它們也會導出一個對象，包含到 JavaScript 包中。請注意，你仍然須要在你的項目中安裝 postcss-modules 。

PostHTML

PostHTML 是一個用插件轉換 HTML 的工具。您能夠使用如下名稱之一建立配置文件，從而使 Parcel 使用 PostHTML 配置 ：.posthtmlrc (JSON), posthtmlrc.js, 或者 posthtml.config.js.

在你的應用程序中安裝插件： yarn add posthtml-img-autosize 而後，建立一個 .posthtmlrc 文件：

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}
複製代碼

插件指定在 plugins 對象的 key 中，並選項定義使用對象值。 若是插件沒有選項，只需將其設置爲 true 便可。

github