零配置构建工具：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...