閱讀(2k) 書簽贊(0) 我要糾錯

Parcel 與 JavaScript

2020-02-14 17:12 更新

JavaScript

支持?jǐn)U展類型: js, jsx, es6, jsm, mjs

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

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

// 使用 ES6語法導(dǎo)入模塊
import dep from './path/to/dep'

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

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

// 導(dǎo)入一個css文件
import './test.css'

// 導(dǎo)入包含 CSS 模塊的 CSS 文件
import classNames from './test.css'

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

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

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

import fs from 'fs'

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

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

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

JSX 中使用圖片

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

// 導(dǎo)入圖片文件
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 轉(zhuǎn)換器，擁有一個龐大的插件生態(tài)系統(tǒng)。在 Parcel 中使用 Babel 方式和其他的打包工具相同。

在你的項目安裝預(yù)先設(shè)置和一些插件：

yarn add --dev @babel/preset-react

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

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

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

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

注意：package.json要比.babelrc權(quán)重高。

默認(rèn) Babel 轉(zhuǎn)換

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

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

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