Parcel前端構建工具

• 2019 年 12 月 25 日
• 筆記

Parcel 是 Web 應用打包工具，適用於經驗不同的開發者。它利用多核處理提供了極快的速度。https://parceljs.org/getting_started.html

配置了一個簡易的web打包工具 https://github.com/MrZHLF/Parcel

 全局安裝

Yarn:  yarn global add parcel-bundler  npm:  npm install -g parcel-bundler

頁面初始化

在你正在使用的項目目錄下創建一個 package.json 文件：

npm init -y

parcel 添加到項目中

npm install parcel-bundler --save-dev

並在根目錄創建一個html文件，相當於主入口文件，在根目錄根據自己的需要，創建對應靜態資源文件，大概最後創建成這樣

接著，通過修改你的package.json來添加這些任務腳本

 腳本配置好之後，直接啟動dev啟動項目，build對項目的打包工具

npm run dev

 在瀏覽器運行這個埠，就可以看到我們的頁面了

移動端適配　

　　在移動端的時候，我們常常會用到vw適配，怎麼寫px自動轉換成vw,這個時候我們就需要配置一下插件，來自動幫助我們完成這個，安裝一下插件

 然後在我們的根目錄的時候，新建一個postcss.config.js文件

module.exports = {      plugins: [          require('autoprefixer'),          require('postcss-import'),          require('postcss-url'),          require('postcss-preset-env'),          require('postcss-aspect-ratio-mini'),          require('postcss-write-svg'),          require('postcss-px-to-viewport')({              viewportWidth: 750,              viewportHeight: 1334,              unitPrecision: 3,              viewportUnit: 'vw',              selectorBlackList: ['.ignore', '.hairlines'],              minPixelValue: 1,              mediaQuery: false          }),          require('cssnano')      ]  }

　這樣我們就可以直接在css文件裡面寫px像素了，這個插件會自動幫我們轉換成vw

 SCSS配置

在css處理器中，我感覺scss還是比較好用的，在這個項目中頁用到的就是scss,直接安裝這個插件就行了

cnpm install sass -D

es6轉換es5

在一些瀏覽器，有一些es6語法，是不支援的，這個是我們就需要babelrc來配置一下。安裝一下插件

 cnpm install @babel/plugin-transform-runtime  @babel/core  @babel/preset-env -D

在根目錄創建一個.babelrc文件，

{      "presets": ["@babel/env"],      "plugins": [          [              "@babel/plugin-transform-runtime",              {                  "corejs": false,                  "helpers": true,                  "regenerator": true,                  "useESModules": false              }          ]      ]  }

這個打包工具適合一些簡易的web頁面，用這個可以快速解決開發效率，還可以配置vue,react，ts等等