成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

記一次基于react、cra2、typescript的pwa項(xiàng)目由開發(fā)到部署（二）

Prasanta / 3244人閱讀

摘要：在上一篇文章記一次基于的項(xiàng)目由開發(fā)到部署一中，我們了解到了給我們提供了哪些支持，也了解到了有哪些不足。項(xiàng)目回顧這是一個(gè)移動(dòng)端的應(yīng)用，使用，，，，基于開發(fā)?？梢蕴砑拥街髌聊唬梢詳嗑W(wǎng)條件下正常打開和訪問(wèn)數(shù)據(jù)。

在上一篇文章記一次基于react、cra2、typescript的pwa項(xiàng)目由開發(fā)到部署（一）中，我們了解到了create-react-app 給我們提供了哪些pwa支持，也了解到了有哪些不足。雖然create-react-app會(huì)幫我們自動(dòng)生成一個(gè)service-worker.js 去緩存我們的app shell，但是并沒(méi)有提供讓開發(fā)者定制service worker的方法，除非我們eject項(xiàng)目，這篇文章繼續(xù)往下講，把在這個(gè)項(xiàng)目中學(xué)到的東西分享給大家。

項(xiàng)目回顧

這是一個(gè)移動(dòng)端的pwa應(yīng)用，使用react，typescript，react-redux，react-router，workbox 基于create-react-app 開發(fā)?？梢蕴砑拥街髌聊唬梢詳嗑W(wǎng)條件下正常打開和訪問(wèn)數(shù)據(jù)。項(xiàng)目地址：browseExpbyReact

使用typescript

typescript是JavaScript的超級(jí)，一方面在typescript中我們可以使用最新的特性，另一方面typescript給我們帶來(lái)了類型系統(tǒng)，可以讓我們寫出健壯的代碼，避免一些潛在的運(yùn)行時(shí)錯(cuò)誤。在create-react-app中使用typescript，官網(wǎng)推薦我們使用的是create-react-app的ts版本，他會(huì)幫你配置好typescript的相關(guān)配置，并使用react-script-ts代替react-script來(lái)驅(qū)動(dòng)項(xiàng)目。但是這個(gè)版本的更新會(huì)稍稍滯后于原版，而且也不利于我們擴(kuò)展腳手架的配置，所以這里不推薦使用。我們使用 react-app-rewired 來(lái)進(jìn)行配置。

感謝讀者提醒：October 29, 2018發(fā)布的 v2.1.0 利用bebal7 添加了對(duì)typescript的支持，現(xiàn)在我們只要運(yùn)行 create-react-app my-app --typescript 就能夠的到typescript的支持了，可以關(guān)注以下網(wǎng)址關(guān)注create-react-app 的更新變動(dòng)create-react-app releases
react-app-rewired

在create-react-app中修改默認(rèn)配置有兩種常用的方法，

一種是 eject 項(xiàng)目，eject會(huì)把我們的腳手架中的配置暴露出來(lái)，然后我們就可以去修改了，但是這是一個(gè)不可逆的過(guò)程，而且講配置暴露出來(lái)也是一個(gè)不優(yōu)雅的做法，所以不推薦。

第二種就是利用 react-app-rewired 去修改我們的配置，他可以讓我們?cè)诓籩ject項(xiàng)目的前提下修改我們的配置。比如配置typescript，我們可以找到對(duì)應(yīng)的插件 react-app-rewire-typescript 進(jìn)行配置。具體可參考本項(xiàng)目

利用workbox 定制自己的service worker

這里到了本文的重點(diǎn)：如何在create-react-app中定制自己的service-worker.js。目前的cra引用了Workbox webpack plugin 代替了先前的 sw-precache-webpack-plugin。我們可以借助 react-app-rewired
去改寫默認(rèn)的Workbox webpack plugin 配置。主要步驟：

在 react-app-rewired 的配置文件 config.overrides.js 中修改 Workbox webpack plugin的配置

在public文件目錄下建立自己的service-worker配置文件

首先在 config.overrides.js 中配置，替換默認(rèn)的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"
      }
      // 刪除默認(rèn)的WorkboxWebpackPlugin配置
      config = removePreWorkboxWebpackPluginConfig(config)
     // 加入我們的配置
      config.plugins.push(new workboxPlugin.InjectManifest(workboxConfigProd))
    }
    return config
  }
}
// 此函數(shù)用來(lái)找出 默認(rèn)配置中的 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
}

這部分的配置大概意思就是，當(dāng)環(huán)境為生成環(huán)境時(shí)，找出webpack中關(guān)于workbox-webpack-plugin的配置，把它刪掉，然后用自己的配置替代它。

這里解釋一下 removePreWorkboxWebpackPluginConfig 這個(gè)函數(shù)。我們可以自己用create-react-app新建一個(gè)無(wú)用的項(xiàng)目，然后eject它，那么我們可以在暴露出來(lái)的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("/[^/]+.[^/]+$"),
      ],
    }),

所以我們可以通過(guò)下面這段代碼找到這段配置的位置：

// 對(duì)plugins數(shù)組調(diào)用findIndex方法，找到構(gòu)造函數(shù)的name屬性為‘GenerateSW’的成員
const preWorkboxPluginIndex = config.plugins.findIndex((element) => {
    return Object.getPrototypeOf(element).constructor.name === "GenerateSW"
  })
// 刪除這個(gè)成員
  if (preWorkboxPluginIndex !== -1) {
    config.plugins.splice(preWorkboxPluginIndex, 1)
  }

替換掉workbox-webpack-plugin的配置后，根據(jù)自己的配置在public目錄下新建cus-service-worker.js文件，這個(gè)文件會(huì)代替默認(rèn)生成的service-worker.js文件，我們就可以通過(guò)配置cus-service-worker.js來(lái)定制自己的pwa配置了，而且cus-service-worker.js 里的內(nèi)容也是有講究的，以本項(xiàng)目為例：

// 引入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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98836.html

相關(guān)文章

  • 記一次基于react、cra2、typescript的pwa項(xiàng)目由開發(fā)到部署（三）

    摘要：配置反向代理我們的項(xiàng)目已經(jīng)在服務(wù)器上的端口運(yùn)行著，所以我們需要配置一個(gè)反向代理，將我們對(duì)服務(wù)器的訪問(wèn)反向代理到服務(wù)器的。 該篇文章為本系列最后一篇文章，因?yàn)樽罱鼧侵髅τ诋呍O(shè)，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項(xiàng)目的部署部分，包括： 如何部署將該項(xiàng)目部署到nginx服務(wù)器上。 為它配置證書，讓它運(yùn)行在https協(xié)議上等。 項(xiàng)目回顧 這是一個(gè)基于creat-reac...

    Betta 評(píng)論0 收藏0

  • 2017前端發(fā)展回顧

    摘要：前端開發(fā)在年依然持續(xù)火熱，本文將對(duì)熱點(diǎn)事件做一個(gè)總結(jié)。版的和協(xié)議在前端領(lǐng)域，一直獨(dú)占鰲頭。年又發(fā)布了一個(gè)重大的版本更新。主要是配合使用了服務(wù)工作線程。而且還提供了供前端開發(fā)者接入。快速發(fā)布了和在悄悄地跳過(guò)之后，在月號(hào)正式發(fā)布。 譯者按： 老技術(shù)日趨成熟，新技術(shù)層出不窮。 原文: A recap of front-end development in 2017 譯者: Fundebu...

    lmxdawn 評(píng)論0 收藏0

  • 2018前端值得關(guān)注的技術(shù)

    摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒(méi)落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無(wú)論都值得關(guān)注。 1.前言 2017悄然過(guò)去，2018已經(jīng)來(lái)到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒(méi)落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家...

    xiao7cn 評(píng)論0 收藏0

  • 2018前端值得關(guān)注的技術(shù)

    摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒(méi)落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無(wú)論都值得關(guān)注。 1.前言 2017悄然過(guò)去，2018已經(jīng)來(lái)到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒(méi)落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家...

    用戶84 評(píng)論0 收藏0

  • 前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

    摘要：的另一個(gè)核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進(jìn)度可能幾個(gè)月后就能與我們見面。是基于的本地化數(shù)據(jù)庫(kù)，支持以及瀏覽器環(huán)境。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID: frontshow），及時(shí)獲取前端每周清單。 本期是 2017 年的最后一...

    趙春朋 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<