99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

Parcel 與 JavaScript

2020-02-14 17:12 更新

JavaScript

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

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

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

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

// 使用動(dòng)態(tài)導(dǎo)入一個(gè)來(lái)自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)入上述這些文件時(shí),所有的依賴將被單獨(dú)放在一個(gè)捆綁包中(列如:一個(gè) CSS 文件),而不會(huì)像其他打包工具那樣內(nèi)聯(lián)該文件。當(dāng)使用CSS Modules,導(dǎo)出的類會(huì)放在 JavaScript 捆綁包中。其他的資源類型將以 URL 的形式導(dǎo)出輸出文件到 JavaScript 包中,以便于能在你的代碼中引用。

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

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

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

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

如果你想內(nèi)聯(lián)文件到 JavaScript 包中,而不是通過(guò) 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是一個(gè)非常受歡迎的 JavaScript 轉(zhuǎn)換器,擁有一個(gè)龐大的插件生態(tài)系統(tǒng)。在 Parcel 中使用 Babel 方式和其他的打包工具相同。

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

yarn add --dev @babel/preset-react

接著,創(chuàng)建一個(gè)文件.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)換你的代碼(包含每個(gè)內(nèi)部模塊)以符合定義的目標(biāo)。對(duì)于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%占比的瀏覽器版本)

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

Flow

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

Parcel 將自動(dòng)安裝所需的 Babel 配置,從已編譯的輸出中剝離 Flow 類型,所以你沒(méi)什么擔(dān)心的除了編輯器集成或者flow 中的絕對(duì)路徑解析模塊。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)