Parcel 有著開(kāi)箱即用的特性, 為我們初始化工程省卻了許多時(shí)間, 但是零配置的特性導(dǎo)致我們比較不方便進(jìn)行一些預(yù)處理, 這篇文章就帶領(lǐng)讀者解決一些我們常會(huì)遇到的一些問(wèn)題. 只需要很簡(jiǎn)單的添加幾個(gè)參數(shù),就可以滿足我們大部分的特殊情況.
在去年, Parcel 沒(méi)有支持 SourceMap 的特性, 導(dǎo)致于無(wú)法進(jìn)行斷點(diǎn)調(diào)試, 從而很多團(tuán)隊(duì)沒(méi)有在生產(chǎn)中使用 Parcel, 現(xiàn)在 Parcel 已經(jīng)支持 SourceMap 的特性, 再加上可以很方便的編寫(xiě)插件去填補(bǔ)一些自定義的功能, 所以 Parcel 我認(rèn)為已經(jīng)可以在新項(xiàng)目的生產(chǎn)中投入使用了.
本文作者簡(jiǎn)單的編寫(xiě)了一個(gè) parcel-plugin-change-file 插件示例, 來(lái)滿足下面的功能, 具體使用請(qǐng)繼續(xù)閱讀文章內(nèi)容.
本文不會(huì)對(duì) Parcel 的基礎(chǔ)使用再多做解釋, 如果您還沒(méi)有接觸過(guò) Parcel ,請(qǐng)先去了解: Parcel 官方文檔-快速開(kāi)始
如何跳過(guò)不需要打包的文件?
如果我們使用 parcel index.html 命令, Parcel 會(huì)自動(dòng)識(shí)別html中的引用,如果是http://就不會(huì)進(jìn)行打包處理, 如果是本地文件,就會(huì)識(shí)別成Assets對(duì)象,進(jìn)行打包.
如果我們需要跳過(guò)對(duì)本地文件的打包, 我們可以使用 parcel-plugin-change-file 插件
$ yarn add -D parcel-plugin-change-file
在 index.html中添加 `` , 注意這里有兩個(gè)中括號(hào).
<body>
<!--[ <script src="lodash.min.js"></script> ]-->
</bodt>
當(dāng)項(xiàng)目編譯結(jié)束之后, 該插件會(huì)把 `` 的注釋內(nèi)容打開(kāi),從而跳過(guò) Parcel 的打包檢測(cè).
<body>
<script src="lodash.min.js"></script>
</bodt>
如何對(duì)html進(jìn)行修改?
例如, 我們嘗試根據(jù) package.json 中的信息修改 index.html 的 title
在項(xiàng)目跟路徑創(chuàng)建 parcel-plugin-change-file.js 文件
const package = require('./package.json')
module.exports = {
html: [package.name],
};
在 src/index.html 中添加 `` , 其中 i 對(duì)應(yīng)之前 html 對(duì)象中的數(shù)組下標(biāo), 這里我們只有一個(gè), 所以用 0
<header>
<title><!-- parcel-plugin-change-file-0 --></title>
</header>
當(dāng)項(xiàng)目編譯結(jié)束之后, 該插件會(huì)把 package.json 中的 name 信息插入到 title
<body>
<title>Parcel優(yōu)雅配置</title>
</bodt>
如何在parcel打包結(jié)束之后拷貝一些文件到打包目錄?
例如, 某些情況, 我們不需要 Parcel 幫我們處理 png 圖片, 我們希望直接使用圖片路徑:
class Banner extends React.Componet {
render(){
return <div style={{
backgoundImage:'img/test.png'
}} ></div>
}
}
那我們就需要在打包之后再把圖片拷貝到相應(yīng)的路徑.
還是確保parcel-plugin-change-file 已被安裝, 然后在項(xiàng)目跟路徑創(chuàng)建parcel-plugin-change-file.js
module.exports = {
copy: ['src/assets', 'src/documents'],
};
正常執(zhí)行 Parcel 打包腳本, 就會(huì)把 src/assets 和 src/documents 的子內(nèi)容拷貝到打包輸出的跟路徑
$ parcel src/index.html
如何達(dá)到和 webpack.DllPlugin 一樣的預(yù)先編譯的效果呢?
Webpack 的 DllPlugin 插件可以把一些不常進(jìn)行修改的庫(kù)提前編譯成一個(gè)文件, 然后在項(xiàng)目里引用, 經(jīng)過(guò)配置webpack不會(huì)再次編譯這些已經(jīng)編譯過(guò)的文件.這樣可以大大的加速平時(shí)編譯的時(shí)間. 從而趕上 Parcel 的打包速度.
而在 Parcel 中,也可以可以把一些不常進(jìn)行修改的庫(kù)提前編譯成一個(gè)文件, 這樣可以在 Parcel 原本就快速的編譯前提下再減去絕大部分的編譯內(nèi)容, 從而極大的加速平時(shí)編譯的時(shí)間, 不過(guò)就只能使用全局對(duì)象引用了.
在Parcel項(xiàng)目中, 是可以使用全局對(duì)象的, 例如我們?cè)趆tml中引入一個(gè)lodash:
<body>
<script src="https://cdn.bootcss.com/lodash.js/4.17.9/lodash.min.js"></script>
</body>
此時(shí), 在項(xiàng)目中不需要import _ from 'lodash', 可以識(shí)別全局_對(duì)象的
console.log(_.map) //可以打印出 _.map 方法
有了以上知識(shí)點(diǎn),我們可以這樣做:
- 創(chuàng)建一個(gè)預(yù)先需要打包的文件:
// dll/default.js
// 假設(shè)這些庫(kù)是自己編寫(xiě)的庫(kù), 需要在預(yù)編譯, 并且在全局引用
import _ from 'lodash';
import Immutable from 'immutable';
// 暴露到全局對(duì)象中
window['_'] = _;
window['Immutable'] = Immutable;
- 使用Parcel進(jìn)行打包, 其中
changeFile=false是不使用 parcel-plugin-change-file 插件:
$ changeFile=false parcel build dll/default.js -d src/dll -o defalut.min.js
以上 default.min.js 已經(jīng)創(chuàng)建好了, 接下來(lái)是在平時(shí) Parcel 的項(xiàng)目中使用它
- 我們需要在
src/index.html里引入src/dll/default.min.js
<head>
<!--[ <script src="default.min.js"></script> ]-->
</head>
- 創(chuàng)建parcel-plugin-change-file.js
module.exports = {
copy: ['src/dll'],
};
- 大功告成,可以在項(xiàng)目里直接使用之前
default.min.js中暴露在window下的全局對(duì)象
// src/index.js
_.map(_.range(500), v=>{
console.log(`hello:${v}`);
})
- 如果需要有提示, 需要編寫(xiě) .d.ts 文件, 然后在項(xiàng)目中引入
這一塊知識(shí)點(diǎn)請(qǐng)查閱 typescript Declaration Files 文檔
/// <reference path="./your-edit.d.ts"/>
啟動(dòng)項(xiàng)目:
$ parcel src/index.html
