Parcel极速零配置Web应用打包工具

时间 2019-11-12

标签 parcel 配置 web 应用打包工具栏目 HTML 繁體版

原文原文链接

当听到极速零配置打包，我不经兴奋起来，零配置！！！想起在webpack打包的配置，这个零配置着实让我好奇不已，迅速学习一波。css

Parcel（parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl]）有如下几大特色：html

极速打包。Parcel使用 worker 进程去启用多核编译。同时有文件系统缓存，即便在重启构建后也能快速再编译。
将你全部的资源打包。Parcel 具有开箱即用的对 JS, CSS, HTML, 文件及更多的支持，并且不须要插件。
自动转换。如如有须要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码。
零配置代码拆分。使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆
自动热更新。在你更新代码保存以后，在浏览能够当即获得更新。
友好的错误日志体验。当遇到错误时，会语法高亮代码片断

了解了Parcel的这些特性以后，接下来开始搞起吧。node

首先经过yarn或者npm安装Parcel：webpack

Yarn：ios

yarn global add parcel-bundler

npm：git

npm install -g parcel-bundler

而后在本身建立的项目目录下建立一个package.json文件：github

npm init

Parcel 可使用任何类型的文件做为入口，可是最好仍是使用 HTML 或 JavaScript 文件。若是在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。web

接下来，建立一个index.html 和 index.js 和 main.css文件。npm

//index.html <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Parcel</title>
</head>
<body>
    <div class="main">
　　　　<div class="box"></div>
　　</div>
    <script src="./index.js"></script>
</body>
</html>

//index.js

import './main.css'

console.log("hello world");

//index.css .main{ width: 400px; height: 400px; background-color: red;
}

Parcel 内置了一个当你改变文件时可以自动从新构建应用的开发服务器，并且为了实现快速开发，该开发服务器支持热模块替换。只须要在入口文件指出：json

parcel index.html

如今在浏览器中打开 http://localhost:1234/，就能够看到效果。而且在目录中会看到打包的文件都在dist/目录下：

若是你想使用本身的端口去覆盖默认端口，也可使用 -p <port>选项覆盖默认的端口，好比：

parcel index.html -p 3000

控制台就会出现以下：

当须要绑定应用程序的时候，你可使用 Parcel 的生产模式。

parcel build  index.html

这将关闭监听模式和热模块替换，因此它只会编译一次。它还会开启 minifier 来减小输出包文件的大小。Parcel 使用的 minifiers 有 JavaScript 的 terser ，CSS 的 cssnano 还有 HTML 的 htmlnano。

JavaScript 文件或 HTML 文件都能导入 CSS 资源，而且能经过 @import语法引用依赖，还能经过 url() 函数引入图片，字体等。其余经过 @import 导入的 CSS 文件被内联到同一个CSS包里，并将 url()引用重写为其输出文件名。全部文件名都应该与当前 CSS 文件相关联。

建立other.css

.box{ width: 200px; height: 200px; background-color: green;
}

以后在main.css中引入

@import './other.css'; .main{ width: 400px; height: 400px; background-color: red;
}

除了普通的 CSS，其余的 LESS，SASS，以及 Stylus 等CSS预处理器语言也是支持的，而且执行方法是与之相同的。下面以scss为例。编译scss须要 node-sass模块. 经过 npm 安装它：

npm install --save-dev node-sass

一旦安装了 node-sass，你就能够在 JavaScript 文件中引入 SCSS 文件。

import './hello.scss'

SCSS 文件中的依赖可使用 @import 语句。

许多打包工具须要你安装和配置插件来转换资源，Parcel 支持许多开箱即用的转换器和内置的编译器。您可使用 Babel 转换 JavaScript ，使用 PostCSS 转换 CSS ，使用 PostHTML 转换 HTML。Parcel 在模块中找到配置文件 (例如 .babelrc ，.postcssrc) 时会自动运行并进行转换。

Babel 是一个流行的 JavaScript 转换器，拥有大型的插件生态系统。Babel 与 Parcel 一块儿使用的方式与单独使用或与其余打包工具一块儿使用的方式相同。先在应用程序中安装presets 和 plugins:

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

而后，建立一个文件 .babelrc：

{ "presets": ["env"] }

PostCSS 是一个使用插件转换 CSS 的工具，例如 autoprefixer，cssnext 以及 CSS Modules 。你可使用这些名称之一建立配置，从而达到使用 Parcel 配置 PostCSS 的目的：.postcssrc(JSON)，.postcss.js，或 postcss.config.js。

先安装plugins:

npm install --save-dev postcss-modules autoprefixer

而后，建立一个文件 .postcssrc：

{ "modules": true, "plugins": { "autoprefixer": { "grid": true } } }

Plugins 在 plugins 对象中被指定为 key，并使用对象的值定义选项。若是插件没有选项，只需将其设置为 true便可。

Parcel 在生产环境构建时，会使用 cssnano 来压缩 css 文件。能够建立一个 cssnano.config.js文件来进行详细的压缩配置：

module.exports = { calc: false, discardComments: { removeAll: true, } };

在咱们熟悉了使用npm run dev来开启一个服务以后，不免也想用这个方法。首先咱们安装依赖：

npm install --save-dev parcel-bundler

而后向package.json 的 scripts 中添加 start 脚本。

// package.json
"scripts": { "start": "parcel index.html" }

以后使用npm run start就能够开启服务了。

附上git地址：https://github.com/parcel-bundler/parcel

中文网： https://zh.parceljs.org/