從 webpack 到全面擁抱 Parcel #1 探索 Parcel

時間 2019-11-06

標籤 webpack 全面擁抱 parcel 探索简体版

原文原文鏈接

最近你們都在關注一個很流行的相似 webpack 的前端構建工具 Parcel。這個庫剛出來沒多久(好像截至目前十幾天)，可是很受歡迎，看下圖就知道。javascript

因此值得一探！css

官方地址：https://parceljs.org/html

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

介紹這個庫以前，咱們來講一下我我的以爲 webpack 的一些很差的地方（相對於 Parcel）。java

須要寫配置文件（webpack.config.js），可能每使用一個功能，好比加載圖片或 css，都要添加配置，要維護配置文件，而 Parcel 不須要。node
感受編譯或加載速度有些慢，特別是庫多或項目複雜的時候，雖然有一些辦法代碼拆分的方法能夠解決，好比 CommonsChunkPlugin 或 DLLPlugin 之類的，但這些方法有些複雜。react

須要必定的時間去學習如何使用 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 資源