从 webpack 到全面拥抱 Parcel #1 探索 Parcel

时间 2019-12-27

标签 webpack 全面拥抱 parcel 探索繁體版

原文原文链接

原文发表于：www.rails365.netjavascript

最近你们都在关注一个很流行的相似 webpack 的前端构建工具 Parcel。这个库刚出来没多久(好像截至目前十几天)，可是很受欢迎，看下图就知道。css

因此值得一探！html

官方地址：https://parceljs.org/前端

github 地址：https://github.com/parcel-bundler/parceljava

介绍这个库以前，咱们来讲一下我我的以为 webpack 的一些很差的地方（相对于 Parcel）。node

须要写配置文件（webpack.config.js），可能每使用一个功能，好比加载图片或 css，都要添加配置，要维护配置文件，而 Parcel 不须要。react
感受编译或加载速度有些慢，特别是库多或项目复杂的时候，虽然有一些办法代码拆分的方法能够解决，好比 CommonsChunkPlugin 或 DLLPlugin 之类的，但这些方法有些复杂。

须要必定的时间去学习如何使用 webpack。

而 Parcel 有不少优势，能够不使用配置文件，也就是说你只管写代码，它会自动运行，很智能化，打个比方吧，好比在 webpack 中若是要处理 css，那得要安装和加载一个 css 的 loader，而后配置文件写上几行，但是 Parcel 不须要，直接用就行。Parcel 学习起来比较简单，基本上能够说 "不用学习"，只是使用就能够了。jquery

除此以外，模块热替换和代码拆分的功能，Parcel 也有，还有，若是要你用 Parcel 写一个 react 的运行环境，可能不须要配置任何内容，只要安装几个 react 的包就能够用起来了。webpack

说了这么多，我仍是要把官方对它的特性进行归纳的图片放出来：ios

下面咱们要开始来体验 parcel 的神奇之处，请跟紧。(源码我放到 https://github.com/hfpp2012/hello-parcel）

1. 安装

$ npm install -g parcel-bundler

而后初始化一个项目。

$ mkdir parcelapp
$ npm init

2. 初体验

新建 html 文件。（这个将会是 parcel 的入口文件）

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>Joke Generator</title>
</head>
<body>
  <div id="wrap">
    <h1>Joke</h1>
    <h3 id="joke"></h3>
  </div>
  <p id="copy"></p>
  <script src="./index.js"></script>
</body>
</html>

index.js

console.log('Hello');

运行编译命令。

$ parcel index.html

注意：上面的 parcel 命令接的是 html 文件，它会读 html 文件的内容，找到 javascript 文件，进行自运处理，不用像 webpack 那样，还要指定 javascript 的入口文件啥的。

生成了 dist 目录。

dist
├── index.html
└── parcelapp.js

监听在 1234 端口，浏览器效果以下：

3. CommonJS 模块语法

新建 jokes.js 文件。

jokes.js

module.exports = {
  getOne: function () {
    return new Promise((resolve, reject) => {
      // 这个 api 是公开的。
      fetch('http://api.icndb.com/jokes/random')
        .then(res => res.json())
        .then(data => {
          resolve(data.value.joke);
        })
    })
  }
}

index.js

const jokes = require('./jokes');

jokes.getOne()
  .then(joke => {
    document.getElementById('joke').innerHTML = joke;
  });

效果以下：

4. ES6 模块语法

require 改为 import，以下所示：

index.js

// const jokes = require('./jokes');

import { jokes } from './jokes';

jokes.getOne()
  .then(joke => {
    document.getElementById('joke').innerHTML = joke;
  });

jokes.js

export const jokes = {
  getOne: function () {
    return new Promise((resolve, reject) => {
      fetch('http://api.icndb.com/jokes/random')
        .then(res => res.json())
        .then(data => {
          resolve(data.value.joke);
        })
    })
  }
}

5. 使用 axios 代替 fetch

这只是为了演示使用一些库。

首先安装 axios。

$ npm install axios

注意，这里每安装一个库，都要从新运行 parcel index.html

jokes.js

import axios from 'axios';

export const jokes = {
  getOne: function() {
    return new Promise((resolve, reject) => {
      axios.get('http://api.icndb.com/jokes/random')
        .then(res => {
          resolve(res.data.value.joke);
        })
    })
  }
}

6. 使用 jquery 代替 getElementById

$ npm install jquery

index.js

import { jokes } from './jokes';
import $ from 'jquery';

jokes.getOne()
  .then(joke => {
    // document.getElementById('joke').innerHTML = joke;
    $('#joke').text(joke);
  });

7. 导入非 JavaScript 资源

copyright.txt

Copyright 2018

index.js

import fs from 'fs';

...

const copy = fs.readFileSync(__dirname + '/copyright.txt', 'utf8');

$('#copy').text(copy);

8. 简单处理 css

style.css

h1 {
  color: red;
  padding-right: 1rem;
}

#wrap {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 5px;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.12);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link rel="stylesheet" href="style.css" />
  <title>Joke Generator</title>
</head>
<body>
  ...
</body>
</html>

9. 在 css 中使用 import

backgrounds.css

body {
  background: #f4f4f4;
}

style.css

@import './backgrounds.css';

...

10. 使用 sass

首先，安装 node-sass。

$ npm install node-sass

这里要花费必定时间，请耐心等待

backgrounds.scss

注意：这里由 backgrounds.css 更名为 backgrounds.scss

@import './variables.scss';

body {
  background: $light-grey;
}

variables.scss

$light-grey: #f4f4f4;

style.css

/* 更名为 scss */
@import './backgrounds.scss';
...

Parcel 还有不少好玩的，咱们之后再说。

从 webpack 到全面拥抱 Parcel #1 探索 Parcel

1. 安装

2. 初体验

3. CommonJS 模块语法

4. ES6 模块语法

5. 使用 axios 代替 fetch

6. 使用 jquery 代替 getElementById

7. 导入 非 JavaScript 资源

8. 简单处理 css

9. 在 css 中使用 import

10. 使用 sass

7. 导入非 JavaScript 资源