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