零配置构建工具:parcel

851 阅读4分钟

更多内容欢迎来到博客:https://imjianjian.github.io

为什么学习parcel

  • 17年12月6日,parcel发布了第一个正式版本,目前已经在GitHub上收获了17.7k+个start。
  • Parcel是一个Web应用程序打包器(bundler),与以往使用过的前端构建工具对比,零配置似乎非常具有优势。
  • 官方表示parcel的打包速度在有cache的情况下,打包速度几乎是webpack的数倍(官方10倍,应该是最佳情况0.0)

安装

npm i -g parcel-bundler

打包

entry

parcel可以用任何文件作为打包入口,一般推荐使用html或js文件。

资源

parcel对js,css,html等特定文件有特殊的支持,parcel会自动分析文件中的依赖关系,相同类型的资源被组合在一起成为相同的输出包。如果你在js文件中引入了其他类型的文件(例如css),那么css依旧会被单独打包,而不是作为内联一并打包到js中。html中的通过链接引入的文件(例如图片,css,js文件)也会被提取并单独打包。

parcel支持使用CommonJS和ES6的模块语法来到如文件。css支持@import方式引入,

// 使用 CommonJS 语法导入模块
const a = require('./a');

// 使用 ES6 import 语法导入模块
import a from './a';

/* 导入另一个 CSS 文件 */
@import './a.css';

转换

现在前端项目中使用到的预处理语言及扩展语言越来越多,css预处理语言有less,sass,stylus等,javaScript的扩展语言有TypeScript,CoffeeScript等。还有pug,ejs,jsx,vue等模板,需要在打包时进行转换。

parcel中已经内置了很多常见的转换和编译器,也可以使用插件来扩展。

在parcel中使用Babel,PostCSS,PostHTML的方式与其单独使用或与其他打包器配合使用的方式相同。

先安装到项目中

npm i -D babel-preset-env
npm i -D postcss-modules autoprefixer
npm i -D posthtml-img-autosize

然后创建配置文件,例如.babelrc

{
  "presets": ["env"]
}

代码拆分

若果要将代码分割成多个单独的包以节省加载时间。parcel使用动态import()函数来实现引入和懒加载。用这种方式引入会被拆分成单独的包并且按需加载。

import()和require()的使用相似,但是import返回的是一个Promise,这意味着它是异步的。

这可以用在路由配置和页面渲染中:

//vue路由
{
     path: 'home',
     component: () =>import('../pages/home.vue')
}
//页面渲染
import('./pages/about').then(function (page) {
  // 渲染页面
  page.render();
});

既然是Promise,这意味着我们可以结合Generator函数(async函数);

// 设置页面名称到动态引入的映射中。
// 在使用前,这些页面都不会被加载。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};

async function renderPage(page) {
  // 懒加载请求页面。
  const page = await pages[page];
  return page.render();
}

开发和生产环境

开发模式

开发过程中,使用以下命令,会开启代码监听并打开parcel的内置服务器,在浏览器中打开localhost://1234,就可以看到。也可以使用-p命令修改默认端口

parcel index.html

如果有自己的服务器,你可以在watch 模式下运行 Parcel 。当文件改变它仍然会自动重新构建并支持热替换,但是不会启动 web 服务。

parcel watch index.html

当你准备在生产模式下创建,build 模式会关闭监听并且只建立一次。

生产模式

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

parcel build index.html

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

启动生产模式还要设置环境变量 NODE_ENV=production 。像 React 这种只用开发调试功能的大型库,通过设置这个环境变量来禁用调试功能,从而构建得更小更快。

命令参数

  • -p, --port 设置服务器端口
  • --https 在https协议上运行
  • -o, --open 自动在默认浏览器打开
  • -d, --out-dir 设置输入路径默认为dist
  • --public-url 设置服务器运行的路劲. 默认与--out-dir option 设置的相同
  • --no-hmr 关闭热模块替换
  • --no-cache 关闭缓存
  • -V, --version 版本信息
  • -h, --help 帮助信息

插件

Parcel 采用与许多其它工具稍微不同的策略,许多常见的格式都被开箱即用地包含进来,而不需要安装或者配置额外的插件。然而,有些情况你可能会想在非标准的情况下扩展 Parcel 的能力,而那些时候,插件是被支持的。安装的插件会基于 package.json 的依赖会被自动检测并加载。parcel插件通常以"parcel-plugin-*"命名。

目前parcel的插件并不多,常用到的有:

  • parcel-plugin-vue
  • parcel-plugin-eslint
  • parcel-plugin-inlinesvg
  • parcel-plugin-pug
  • parcel-plugin-typescript
  • parcel-plugin-fable
  • parcel-plugin-handlebars
  • parcel-plugin-svelet
  • parcel-plugin-elm
  • parcel-plugin-markdown
  • parcel-plugin-stylelint
  • parcel-plugin-angular
  • parcel-plugin-mustache

零配置打包vue

项目地址: https://github.com/w3c-king/parcel-vue