零配置打包工具 Parcel 实践

Posted A_山水子农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零配置打包工具 Parcel 实践相关的知识,希望对你有一定的参考价值。

  继 Webpack 之后,又一款打包工具 Parcel 横空出世,Parcel 是快速、零配置的 Web 应用程序打包器;

1、 Parcel 使用工作进程启用多核编译,并具有文件系统缓存,即使在重新启动后也可快速重新构建。

2 、Parcel 支持JS,CSS,html,文件资源等等 - 不需要安装任何插件。

3、在需要时,代码使用 Babel,PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。

4、Parcel 使用动态 import() 语法拆分您的输出包,所以只加载初始加载时所需的内容。

5、当你在开发过程中进行更改时,Parcel 会自动更新浏览器中的模块,不需要进行任何配置。

6、遇到错误时,Parcel 会以语法高亮的形式打印的代码帧,以帮助你查明问题。

  关于Parcel 的优缺点,以及Parcel和Webpack的比较,Parcel Vs Webpack讲解的比较详细,本文主要是Parcel实践的实践。

Parcel文档: http://www.css88.com/doc/parcel/getting_started.html
Parcel Github: https://github.com/parcel-bundler/parcel

一、Parcel安装

  Parcel是一个Web应用程序打包器(bundler) ,与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能,并且你不需要进行任何配置。首先使用Yarn或npm安装 Parcel:

  Yarn:

yarn global add parcel-bundler

  npm:

npm install -g parcel-bundler

  安装完之后可以通过parcel -V查看Parcel的版本:

  Parcel 内置了一个开发服务器,这会在你更改文件时自动重建你的应用程序,并支持模块热替换 ,以便你快速开发。你只需指定入口文件即可:

parcel index.html -p 8089


  然后在浏览器中打开 http://localhost:8089/ 可以查看index.html页面,parcel支持热更新,会监听html、css、js的改变并即时渲染。

二、模块化项目实践

  示例的目录结构:

  模块化项目首先需要创建一个package.json文件,使用npm init -y或者yarn init -y创建一个默认的package.json文件,修改parcel的运行命令为npm run dev或者yarn run dev


  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "parcel index.html -p 8089"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC"

  虽然全局安装了parcel,在项目中还是推荐安装依赖:

npm install parcel-bundler -S

  Babel 默认只转换新的 javascript 语法,而不转换新的 API。例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转译。如果想使用这些新的对象和方法,必须使用 babel-polyfill,为当前环境提供一个垫片。因为项目中用到了新的对象和方法,所以应当安装babel-polyfill插件。

npm install babel-polyfill -S

然后,创建一个 .babelrc 文件:


  "presets": [
    ["env",  "modules": false ],
    "stage-2"
  ],
  "plugins": ["transform-runtime"]

  在安装的parcel依赖中自带了postcss的所有插件,所以项目中只需要创建一个 .postcssrc 文件:


  "plugins": 
      "autoprefixer" : true
  

  js和css都已经处理完成,安装完所需的依赖后package.json:


  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "dev": "parcel index.html -p 8089"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
  ,
  "dependencies": 
    "babel-polyfill": "^6.26.0",
    "parcel-bundler": "^1.6.2"
  

  index.html

<!DOCTYPE html>
<html>
 <link>
	<title>parcel使用</title>
	<link rel="stylesheet" href="./static/css/style.css"/>
 </head>
 <body>
   <header>
      <img class="logo"
           src="./static/images/logo.svg"
           alt="Parcel">
      <h2>快速,零配置的 Web 应用程序打包器</h2>
      <div class="parcel">
        <img src="./static/images/parcel-back.png"
             srcset="./static/images/parcel-back.png 2x, ./static/images/parcel-back.png 3x">
        <img src="./static/images/parcel-front.png"
             srcset="./static/images/parcel-front.png 2x, ./static/images/parcel-front.png 3x"> </div>
      <div class="wrapper">
        <div class="item1">parcel</div>
        <div class="item2">parcel</div>
        <div class="item3">parcel</div>
        <div class="item4">parcel</div>
        <div class="item5">parcel</div>
      </div>
   </header>
	<script src="./static/js/index.js"/></script>
 </body>
</html>

  运行npm run dev 在浏览器中打开http://localhost:8089/如图所示:

  运行后生产.cache和dist目录,.cache是缓存文件,dist是打包文件;dist目录如下:

  运行后修改html、css、js页面都会自动更新。Parcel构建速度比webpack快,但 Parcel输出文件比webpack大,Parcel构建用于运行在浏览器中的网页,比较适合小型的项目,使用中还是存在不少的坑。

以上是关于零配置打包工具 Parcel 实践的主要内容,如果未能解决你的问题,请参考以下文章

parcel 中小型项目打包工具

Parcel上手——又一个打包工具

前端打包工具进阶webpack到parcel

继webpack后又一打包神器Parcel

Parcel个人笔记

打包工具parcel的问题,求助