資訊專欄INFORMATION COLUMN
摘要：在上一篇文章記一次基于的項目由開發(fā)到部署一中，我們了解到了給我們提供了哪些支持，也了解到了有哪些不足。項目回顧這是一個移動端的應(yīng)用，使用，，，，基于開發(fā)?？梢蕴砑拥街髌聊唬梢詳嗑W(wǎng)條件下正常打開和訪問數(shù)據(jù)。
在上一篇文章記一次基于react、cra2、typescript的pwa項目由開發(fā)到部署（一）中，我們了解到了create-react-app 給我們提供了哪些pwa支持，也了解到了有哪些不足。雖然create-react-app會幫我們自動生成一個service-worker.js 去緩存我們的app shell，但是并沒有提供讓開發(fā)者定制service worker的方法，除非我們eject項目，這篇文章繼續(xù)往下講，把在這個項目中學到的東西分享給大家。
項目回顧這是一個移動端的pwa應(yīng)用，使用react，typescript，react-redux，react-router，workbox 基于create-react-app 開發(fā)?？梢蕴砑拥街髌聊?，可以斷網(wǎng)條件下正常打開和訪問數(shù)據(jù)。項目地址：browseExpbyReact
使用typescripttypescript是JavaScript的超級，一方面在typescript中我們可以使用最新的特性，另一方面typescript給我們帶來了類型系統(tǒng)，可以讓我們寫出健壯的代碼，避免一些潛在的運行時錯誤。在create-react-app中使用typescript，官網(wǎng)推薦我們使用的是create-react-app的ts版本，他會幫你配置好typescript的相關(guān)配置，并使用react-script-ts代替react-script來驅(qū)動項目。但是這個版本的更新會稍稍滯后于原版，而且也不利于我們擴展腳手架的配置，所以這里不推薦使用。我們使用 react-app-rewired 來進行配置。
感謝讀者提醒：October 29, 2018發(fā)布的 v2.1.0 利用bebal7 添加了對typescript的支持，現(xiàn)在我們只要運行 create-react-app my-app --typescript 就能夠的到typescript的支持了，可以關(guān)注以下網(wǎng)址關(guān)注create-react-app 的更新變動create-react-app releasesreact-app-rewired
在create-react-app中修改默認配置有兩種常用的方法，
一種是 eject 項目，eject會把我們的腳手架中的配置暴露出來，然后我們就可以去修改了，但是這是一個不可逆的過程，而且講配置暴露出來也是一個不優(yōu)雅的做法，所以不推薦。
第二種就是利用 react-app-rewired 去修改我們的配置，他可以讓我們在不eject項目的前提下修改我們的配置。比如配置typescript，我們可以找到對應(yīng)的插件 react-app-rewire-typescript 進行配置。具體可參考本項目
利用workbox 定制自己的service worker這里到了本文的重點：如何在create-react-app中定制自己的service-worker.js。目前的cra引用了Workbox webpack plugin 代替了先前的 sw-precache-webpack-plugin。我們可以借助 react-app-rewired
去改寫默認的Workbox webpack plugin 配置。主要步驟：
在 react-app-rewired 的配置文件 config.overrides.js 中修改 Workbox webpack plugin的配置
在public文件目錄下建立自己的service-worker配置文件
首先在 config.overrides.js 中配置，替換默認的workbox-webpack-plugin配置：
/* config-overrides.js */
// typescript的配置插件
const rewireTypescript = require("react-app-rewire-typescript");
const workboxPlugin = require("workbox-webpack-plugin")
const path = require("path")
module.exports = {
webpack: function (config, env) {
// typescript的配置插件
config = rewireTypescript(config, env);
if (env === "production") {
// 在 ‘production’ 模式下加入自己的配置
const workboxConfigProd = {
swSrc: path.join(__dirname, "public", "cus-service-worker.js"),
swDest: "cus-service-worker.js",
importWorkboxFrom: "disabled"
}
// 刪除默認的WorkboxWebpackPlugin配置
config = removePreWorkboxWebpackPluginConfig(config)
// 加入我們的配置
config.plugins.push(new workboxPlugin.InjectManifest(workboxConfigProd))
}
return config
}
}
// 此函數(shù)用來找出 默認配置中的 WorkboxWebpackPlugin， 并把它刪除
function removePreWorkboxWebpackPluginConfig (config) {
const preWorkboxPluginIndex = config.plugins.findIndex((element) => {
return Object.getPrototypeOf(element).constructor.name === "GenerateSW"
})
if (preWorkboxPluginIndex !== -1) {
config.plugins.splice(preWorkboxPluginIndex, 1)
}
return config
}
這部分的配置大概意思就是，當環(huán)境為生成環(huán)境時，找出webpack中關(guān)于workbox-webpack-plugin的配置，把它刪掉，然后用自己的配置替代它。
這里解釋一下 removePreWorkboxWebpackPluginConfig 這個函數(shù)。我們可以自己用create-react-app新建一個無用的項目，然后eject它，那么我們可以在暴露出來的config文件夾下的 webpack.config.prod.js 中看到關(guān)于 workbox-webpack-plugin 的配置
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/.map$/, /asset-manifest.json$/],
importWorkboxFrom: "cdn",
navigateFallback: publicUrl + "/index.html",
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they"re likely an API call
new RegExp("^/_"),
// Exclude URLs containing a dot, as they"re likely a resource in
// public/ and not a SPA route
new RegExp("/[^/]+.[^/]+$"),
],
}),
所以我們可以通過下面這段代碼找到這段配置的位置：
// 對plugins數(shù)組調(diào)用findIndex方法，找到構(gòu)造函數(shù)的name屬性為‘GenerateSW’的成員
const preWorkboxPluginIndex = config.plugins.findIndex((element) => {
return Object.getPrototypeOf(element).constructor.name === "GenerateSW"
})
// 刪除這個成員
if (preWorkboxPluginIndex !== -1) {
config.plugins.splice(preWorkboxPluginIndex, 1)
}
替換掉workbox-webpack-plugin的配置后，根據(jù)自己的配置在public目錄下新建cus-service-worker.js文件，這個文件會代替默認生成的service-worker.js文件，我們就可以通過配置cus-service-worker.js來定制自己的pwa配置了，而且cus-service-worker.js 里的內(nèi)容也是有講究的，以本項目為例：
// 引入workbox全局變量
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js");
if (workbox) {
console.log(`Yay! Workbox is loaded
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98836.html
摘要：配置反向代理我們的項目已經(jīng)在服務(wù)器上的端口運行著，所以我們需要配置一個反向代理，將我們對服務(wù)器的訪問反向代理到服務(wù)器的。 該篇文章為本系列最后一篇文章，因為最近樓主忙于畢設(shè)，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項目的部署部分，包括： 如何部署將該項目部署到nginx服務(wù)器上。 為它配置證書，讓它運行在https協(xié)議上等。 項目回顧 這是一個基于creat-reac...
摘要：前端開發(fā)在年依然持續(xù)火熱，本文將對熱點事件做一個總結(jié)。版的和協(xié)議在前端領(lǐng)域，一直獨占鰲頭。年又發(fā)布了一個重大的版本更新。主要是配合使用了服務(wù)工作線程。而且還提供了供前端開發(fā)者接入。快速發(fā)布了和在悄悄地跳過之后，在月號正式發(fā)布。 譯者按： 老技術(shù)日趨成熟，新技術(shù)層出不窮。 原文: A recap of front-end development in 2017 譯者: Fundebu...
摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會興起，哪些技術(shù)會沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會興起，哪些技術(shù)會沒落。下面就我個人的判斷進行一個預(yù)測判斷，希望能對大家...
摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會興起，哪些技術(shù)會沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會興起，哪些技術(shù)會沒落。下面就我個人的判斷進行一個預(yù)測判斷，希望能對大家...
摘要：的另一個核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進度可能幾個月后就能與我們見面。是基于的本地化數(shù)據(jù)庫，支持以及瀏覽器環(huán)境。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。 本期是 2017 年的最后一...
閱讀 3259·2021-09-22 15:58
閱讀 1724·2019-08-30 14:17
閱讀 1729·2019-08-28 18:05
閱讀 1514·2019-08-26 13:33
閱讀 692·2019-08-26 12:20
閱讀 616·2019-08-26 12:18
閱讀 3198·2019-08-26 11:59
閱讀 1412·2019-08-26 10:36
