前言

Parcel 是什么

Parcel 是一个前端创设工具,Parcel 官网
将它定义为极速零配置的Web应用打包工具。没错,又是一个构建工具,你一定会想,为啥前端的营造工具见怪不怪,搞那么多工具又要花时间去学习,真的有意义呢?在
webpack
已经变成前端创设工具主流的明日,一个新的工具能有怎么着优势来站稳脚跟呢?

为何要用 Parcel

一个好的卷入工具在前端工程中占着相比较关键的地点。然,何谓之好?或功效强大,或简捷易用,或升高功效,或符合自己。在时代不断前行中,一个个好的工具正在被一个更好的工具所代替。随着对
webpack 复杂配置的吐槽声越多,Parcel 打着 “火速、零配置”
的旗子出来了。

Parcel 的特性

  • 敏捷打包:启用多核编译,并保有文件系统缓存
  • 卷入所有资源:接济JS,CSS,HTML,文件资源等等 –
    不须要设置任何插件
  • 机动转换:使用 Babel,PostCSS 和 PostHTML 自动转换
  • 零配置代码拆分:使用动态 import()
    语法拆分你的输出包,只加载早先加载时所需的始末
  • 模块热替换:不要求展开其余配置
  • 温馨的一无可取记录:以语法高亮的款式打印的代码帧,以帮忙你调查难题

怎么样使用

高速利用

大局安装 npm i parcel-bundler -gyarn add parcel-bundler global

Parcel 使用一个文件作为入口,最好是 HTML 或 JavaScript
文件,大家在档次中新建 index.html 文件,直接运行命令 parcel index.html
即可启动本地服务器

在浏览器中访问 http://localhost:1234/ ,可以透过
parcel index.html -p 8888 重新设置端口号。

无需配置文件!

Parcel 襄助 CommonJS 模块语法、ES6 模块语法、在 js 文件中导入 node
模块或 css、在 css 中动用 import 等,也都无需配备文件!

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

// src/js/index.js

const main1 = require('./main1.js');    // 支持 CommonJS 模块语法
import main2 from './main2.js';         // 支持 ES6 模块语法
import '../css/index.css';              // 支持在 js 中导入 css

main1();
main2();

上边只是不难的利用了
Parcel,但在实质上项目中,大家会用到种种技术栈,下边我们来探望 Parcel
怎样集成各类技能栈的。

注意:Parcel 里采用了 async await,因而须要 node 7.6 以上的版本才支撑

合龙技术栈

第一在品种下创立 package.json 、.babelrc、以及
index-react.html、index-vue.html、index-ts.html 多个作为独家技术栈 demo
的进口文件。

在 package.json 中添加以下命令

"scripts": {
  "react": "parcel index-react.html",
  "vue": "parcel index-vue.html",
  "ts": "parcel index-ts.html"
}

React

安装 React 的连锁看重
npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中添加

{
  "presets": ["env","react"]
}

那就是地点讲到的 Parcel 的特色:自动转换。该文件是让 Parcel 自动转换 ES6
和 React JSX。

<!-- index-react.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel React</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="react-app"></div>
        <script src="src/react/index.js"></script>
    </body>
</html>

// src/react/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Hello extends Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

ReactDOM.render(<Hello />, document.getElementById('react-app'));

运转命令 npm run react 打开 http://localhost:1234/ 即可看到 Hello
React

Vue

就在日前,Parcel 终于帮助 .vue 文件了,只必要引入一个包
parcel-plugin-vue,不需要其余配置,即可打包 Vue 了。

设置 Vue 相关依赖,npm i -S vue parcel-plugin-vue

<!-- index-vue.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel Vue</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="vue-app"></div>
        <script src="src/vue/index.js"></script>
    </body>
</html>

// src/vue/index.js
import Vue from 'vue';
import App from './app.vue';

new Vue({
    el: '#vue-app',
    render: h => h(App)
})

<!-- src/vue/app.vue -->
<template>
    <div>
        <h1>Hello Vue</h1>
    </div>
</template>

运行命令 npm run vue 打开 http://localhost:1234/ 即可看到 Hello Vue

TypeScript

集成 TypeScript 也极度不难,只须要安装 typescript
模块即可,也无需配置。

安装 TypeScript 相关看重,npm i -S typescript

<!-- index-ts.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel TypeScript</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1 id="ts-app"></h1>
        <script src="src/typescript/index.ts"></script>
    </body>
</html>

interface Name {
    value: string;
}
function showName(name: Name){
    document.getElementById('ts-app').innerHTML = 'Hello ' + name.value;
}

showName({value: 'TypeScript'});

运转命令 npm run ts 打开 http://localhost:1234/ 即可看到 Hello
TypeScript

Sass

将 Sass 在上面技术栈中使用也非常不难,只须要设置 node-sass
模块即可,也无需配置。

设置 Sass 相关看重,npm 可能会下载不成功,那里运用 cnpm
来安装,cnpm i -S node-sass

在 src/vue/app.vue 中来利用 Sass

<!-- src/vue/app.vue -->
<template>
    <div class="main">
        <h1>Hello Vue</h1>
    </div>
</template>

<style lang="scss">
    @import '../sass/main.scss';
</style>

.main{
    h1{
        color: #0099ff;
    }
}

双重运行命令 npm run vue 即可看到带有黄色字体的 Hello Vue

如上的 demo 源码地址:parcel-demo

生育条件

  • 安装环境变量parcel build index.html NODE_ENV=production
  • 设置输出目录parcel build index.html -d build/output
  • 设置要提供服务的集体 URL
    parcel build index.html --public-url ./
  • 禁用压缩parcel build index.html --no-minify
  • 剥夺文件系统缓存parcel build index.html --no-cache

疑问

  • 出口目录里是还是不是可以再分子目录,例如 css / js / img 等?
  • 页面引用的 html 被打包后也会重命名成很长的一串,是还是不是足以不重命名?

前端情报局

是因为如今 Parcel 打着零配置的口号俘获了成百上千前端开发者的心,并且伴随着吐槽
webpack 使用安顿复杂的动静。webpack 大旨开发者特意解释道,webpack
v4.0.0-alpha.1 中加入了 mode 这么些布局,那使得众多长短不一繁琐的布署(诸如:
sourcemaps、 tree shaking,、minification、scope hoisting)webpack
都替我们搞好了,对于使用者来说,基本上也是零布署了。

越来越多小说:lin-xin/blog

相关文章

网站地图xml地图