零配置构建工具：parcel

更多内容欢迎来到博客：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，eje，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 <port> 设置服务器端口
--https 在https协议上运行
-o, --open 自动在默认浏览器打开
-d, --out-dir <path> 设置输入路径默认为dist
--public-url <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/p...