Parcel 與 JavaScript

JavaScript

支持擴展類型: js, jsx, es6, jsm, mjs

Web 端打包最常見的文件類型是 JavaScript。Parcel 支持以 CommonJS 和 ES6 模塊語法導入文件。同時也支持動態(tài)import()函數(shù)語法異步加載模塊，這將在代碼拆分部分討論。動態(tài)導入也能通過 URL 鏈接導入模塊。

// 使用 CommonJS 語法導入模塊
const dep = require('./path/to/dep')

// 使用 ES6語法導入模塊
import dep from './path/to/dep'

// 使用動態(tài)導入一個來自CDN的URL地址
import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js').then(() => {
  console.log(_.VERSION)
})

你也能在 JavaScript 文件里導入非 JavaScript 資源，例如：CSS, HTML，甚至是圖片文件。當你導入上述這些文件時，所有的依賴將被單獨放在一個捆綁包中（列如：一個 CSS 文件），而不會像其他打包工具那樣內聯(lián)該文件。當使用CSS Modules，導出的類會放在 JavaScript 捆綁包中。其他的資源類型將以 URL 的形式導出輸出文件到 JavaScript 包中，以便于能在你的代碼中引用。

// 導入一個css文件
import './test.css'

// 導入包含 CSS 模塊的 CSS 文件
import classNames from './test.css'

// 以 URL 的形式引入圖片
import imageURL from './test.png'

// 導入一個html文件
import('./some.html')
// 或:
import html from './some.html'
// 或:
require('./some.html')

如果你想內聯(lián)文件到 JavaScript 包中，而不是通過 URL 地址引用，你可以使用 Node.js fs.readFileSync API。URL 地址必須是靜態(tài)可分析的，意味著它不能有任何變量（除了__dirname 和 __filename）

import fs from 'fs'

// 以字符串的形式讀取內容
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8')

// 以 Buffer 的形式讀取內容
const buffer = fs.readFileSync(__dirname + '/test.png')

// 轉換Buffer格式到圖片
;<img src={`data:image/png;base64,${buffer.toString('base64')}`} />

JSX 中使用圖片

下面是如何導入圖片文件在 JSX 中的一些例子。

// 導入圖片文件
import megaMan from "./images/mega-man.png";

// JSX
<img src={megaMan} title="Mega Man" alt="Mega Man" />

// JSX (自定義路徑)
<img src={`/dist${megaMan}`} title="Mega Man" alt="Mega Man" />

Babel

Babel是一個非常受歡迎的 JavaScript 轉換器，擁有一個龐大的插件生態(tài)系統(tǒng)。在 Parcel 中使用 Babel 方式和其他的打包工具相同。

在你的項目安裝預先設置和一些插件：

yarn add --dev @babel/preset-react

接著，創(chuàng)建一個文件.babelrc：

{
  "presets": ["@babel/preset-react"]
}

你也可以把babel配置在package.json中：

"babel": {
  "presets": ["@babel/preset-react"]
}

注意：package.json要比.babelrc權重高。

默認 Babel 轉換

Parcel 默認使用@babel/preset-env轉換你的代碼（包含每個內部模塊）以符合定義的目標。對于browser目標環(huán)境的則使用browserslist，browserslist 可以定義在package.json (engines.browsers or browserslist)或者使用配置文件(browserslist or .browserslistrc)。（譯者注：一般定義到 package.json 的 browserslist 字段）。

browserslist 默認是：> 0.25%（支持全球大于 0.25%占比的瀏覽器版本）

對于目標是node環(huán)境的，Parcel 使用engines.node 在 package.json中定義的值，默認是：node 8

Flow

Flow 是一個受歡迎的對 JavaScript 靜態(tài)類型檢查工具（譯者注：Flow 已死，現(xiàn)在是 TypeScript 的天下）。Flow 配合 Parcel 使用就像在你的js文件第一行放置// @flow一樣簡單。

Parcel 將自動安裝所需的 Babel 配置，從已編譯的輸出中剝離 Flow 類型，所以你沒什么擔心的除了編輯器集成或者flow 中的絕對路徑解析模塊。