继webpack后又一打包神器Parcel

时间 2019-11-09

标签 webpack 后又打包神器 parcel 繁體版

原文原文链接

前言：

　　在继grunt、gulp实现自动化构建以后，webpack又引领前端打包潮流，众所周知的是，vue-cli的脚手架就是基于webpack进行项目打包的。而webpack还在上升的势头的时候，又一打包神器横空出世——parcel。css

Parcel

快速，零配置的 Web 应用程特性　　

　　快速打包html

　　　　Parcel 使用工做进程启用多核编译，并具备文件系统缓存，即便在从新启动后也可快速从新构建。
　　打包全部资源
　　　　Parcel 支持JS，CSS，HTML，文件资源等等 - 不须要安装任何插件。
　　自动转换
　　　　在须要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换 - 即便是 node_modules。
　　零配置代码拆分
　　　　Parcel 使用动态 import() 语法拆分您的输出包，因此只加载初始加载时所需的内容。
　　模块热替换
　　　　当你在开发过程当中进行更改时，Parcel 会自动更新浏览器中的模块，不须要进行任何配置。
　　友好的错误记录
　　　　遇到错误时，Parcel 会以语法高亮的形式打印的代码帧，以帮助你查明问题。前端

为啥用 parcel？

　　如今有不少Web应用程序打包工具，包括webpack 和 browserify。因此，咱们为何还须要一个呢？主要的缘由是围绕开发者的经验。　vue

　　不少打包工具都围绕配置和插件进行构建的，所以看到有500行以上配置的应用程序正常运行并不罕见。这种配置不只繁琐和费时，并且也很可贵到正确的配置，必须为每一个应用程序复制。一般状况下，这可能致使次优化的应用程序发送到生产环境。parcel 被设计为零配置：只要将它指向你的应用程序的入口点，它就能作正确的事情。
　　现有的打包工具大多都执行得慢，具备不少文件和依赖的大型应用将花费数分钟去构建，随着时间的推移，这将会至关痛苦的事情。监听文件变动能帮助从新编译，当时初始构建的时候一般仍是会很慢。parcel 利用现代的多核处理能力和工做线程去并行编译你的代码。这致使了初始构建的速度极大的提高。它还有一个文件系统缓存，能够保存每一个文件的编译结果，以便更快的后续启动。
　　最后，现有的打包工具都是围绕字符串加载/转换进行构建的，其中转换须要一个字符串，解析它，而后进行一些转换，以后再次生成代码。一般这最终致使许多解析和代码生成在单个文件上运行，这是低效的。相反，parcel 的转换工做在 AST上，因此这样每一个文件就有一个解析，多个转换和一个代码生成。node

Parcel 是如何工做的？　

　　Parcel 将资源树转换成包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源，还有附加在其上的其它格式的资源。例如，在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的，它能按你所期待的方式那样与任意类型的资源工做，且毋须配置。
　　构建资源树
　　Parcel 接受单个入口资源做为输入，能够是任意类型：JS、HTML、CSS、图片文件等等。在 Parcel 中定义了许多不一样的资源类型，它知道如何去处理特定的文件类型。资源会被解析，资源的依赖会被提取，资源会被转换成最终编译好的形态。此过程建立了一个资源树。
　　构建文件束树
　　一旦资源树被构建好，资源会被放置在文件束树中。首先一个入口资源会被建立成一个文件束，而后动态的 import() 会被建立成子文件束，这引起了代码的拆分。当不一样类型的文件资源被引入，兄弟文件束就会被建立。例如你在 JavaScript 中引入了 CSS 文件，那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。若是资源被多于一个文件束引用，它会被提高到文件束树中最近的公共祖先中，这样该资源就不会被屡次打包。
　　打包
　　在文件束树被构建以后，每一个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每一个资源中将代码合并起来，生成到最终被浏览器加载的文件中。
[ps：基于官网https://parceljs.org/进行的总结]webpack

入门Demo

　　1、初始化npmgit

npm init

　　2、添加babel 并安装 babel-preset-env依赖github

　　1.新建.babelrc 文件　web

{
  "presets": [
    "env"
  ]
}

　　2.安装依赖vue-cli

npm install babel-preset-env --save-dev

　　3、添加parcel

npm install parcel-bundler --save-dev

　　4、最后生成的package.json文件大概就这样：

{
  "name": "parcel-demo",
  "version": "1.0.0",
  "description": "parcel",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"parcel index.html"
  },
  "keywords": [
    "parcel"
  ],
  "author": "aaron",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.2.0"
  }
}

[　ps：给npm添加启动项：

"start":"parcel index.html"

]　　

　　5、最后根据官网新建index.html，index.js等文件，而后命令行打包，而后运行npm start 或 parcel index.html 启动，简单的demo就生成了。

　　index.html / index.js / main.js / main.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Parcel</title>
</head>
<body>
<h1 class="main">parcel</h1>
<script src="./js/index.js"></script>
</body>
</html>

import main from './main';

main();

import classes from '../css/main.css'

export default ()=>{
    console.log(classes);
}

.main{
    background: url("../images/parcel.png");
    color:red;
}

　　截图：

　　若是报了上面那些错误。貌似node.js 7.6版本如下对await / async 不支持，因此在执行打包时须要升级node.js版本。

　　parcel中文官网：http://www.parceljs.io/

　　parcel GitHub：https://github.com/parcel-bundler/parcel

　　关于parcel的更多使用方法还需深刻了解才行，每个打包工具我都以为都有它的独特魅力。

　　期待parcel的发展......