Parcel前端構建工具

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等等