国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

Webpack 服務(wù)器端代碼打包

xiaowugui666 / 2823人閱讀

摘要：環(huán)境變量之前我們?cè)陧?xiàng)目里會(huì)經(jīng)常使用但這個(gè)變量對(duì)于打包是有影響的在的時(shí)候是有優(yōu)化的所以我們將改用其他的環(huán)境變量來(lái)區(qū)別像這樣始終為而我們實(shí)際開(kāi)發(fā)產(chǎn)品環(huán)境用變量來(lái)使用由于該項(xiàng)目是一個(gè)接口服務(wù)項(xiàng)目所以這樣進(jìn)行命名可以改成任意的你開(kāi)心就好動(dòng)態(tài)配置打包

環(huán)境變量

之前,我們?cè)陧?xiàng)目里會(huì)經(jīng)常使用 process.env.NODE_ENV, 但這個(gè)變量對(duì)于 webpack打包是有影響的, 在 production 的時(shí)候是有優(yōu)化的.

所以, 我們將改用其他的環(huán)境變量來(lái)區(qū)別:

new webpack.DefinePlugin({
  "process.env.NODE_ENV": ""production"",
  "process.env.API_ENV": `"${process.env.API_ENV || "development"}"`
})

像這樣, NODE_ENV 始終為 production.

而我們實(shí)際開(kāi)發(fā)/產(chǎn)品環(huán)境, 用 process.env.API_ENV 變量來(lái)使用(由于該項(xiàng)目是一個(gè) koa 接口服務(wù)項(xiàng)目, 所以這樣進(jìn)行命名, 可以改成任意的, 你開(kāi)心就好).

動(dòng)態(tài)配置打包 注意

我們以前在 node.js 后端項(xiàng)目中, 動(dòng)態(tài)配置加載一般是這樣寫(xiě):

const ENV = process.env.NODE_ENV || "development";
// eslint-disable-next-line import/no-dynamic-require
const options = require(`./_${ENV}`);

module.exports = options;

為了提高閱讀性, 和可能存在ENV的復(fù)用, 我們會(huì)多帶帶定義一個(gè)變量.

在 webpack 打包的項(xiàng)目中直接這樣做的話, 會(huì)產(chǎn)生一個(gè)問(wèn)題. 比如我現(xiàn)在有多個(gè)配置:

_develpment.js

_test.js

_production.js

_staging.js

即便我傳入的當(dāng)前環(huán)境為 development, 依然所有的配置文件會(huì)被全部打包進(jìn)來(lái)(只是永遠(yuǎn)不會(huì)被執(zhí)行). 那么這樣的話, 就存在敏感信息泄露的風(fēng)險(xiǎn).

正確的姿勢(shì)應(yīng)該是這樣的:

config/index.js 
// eslint-disable-next-line import/no-dynamic-require
const options = require(`./_${process.env.API_ENV || "development"}`);

module.exports = options;
模塊化打包

比如, 我在項(xiàng)目中有很多個(gè)模塊, 處于負(fù)載均衡的需求, 或者是對(duì)于客戶定制模塊化產(chǎn)品的需求, 我們需要分模塊進(jìn)行打包, 避免其他模塊(永遠(yuǎn)不會(huì)被執(zhí)行的)被打包進(jìn) webpack bundle.

// config/_development.js
exports.enabledModules = ["user", "demo"]; 
// 可能 src 目錄下 還有其他模塊目錄, 如 "manage" 等

在服務(wù)端加載的時(shí)候, 是這樣子的:

// src/server.js
// 動(dòng)態(tài)加載啟用的模塊
enabledModules.forEach((mod) => {
  /* eslint-disable global-require,import/no-dynamic-require */
  const routes = require(`./${mod}/route`);
  routes.middleware() |> app.use;
});

那么就需要 ContextReplacementPlugin 插件來(lái)支持了.

new webpack.ContextReplacementPlugin(/src/, new RegExp(`^./(${enabledModules.join("|")})/.*$`))
進(jìn)階使用

比如,src目錄下除了各個(gè)模塊的目錄, 還有一些通用方法類(lèi),鉤子的目錄, 如: lib 和 hook. 這兩個(gè)目錄是可能被其他子模塊共同引用的. 在插件正則中修改:

new webpack.ContextReplacementPlugin(/src/, new RegExp(`^./(lib|hook|${enabledModules.join("|")})/.*$`))
壓縮代碼, 并添加 source-map 支持

Uglifyjs 或 Uglify-es 其實(shí)對(duì)于服務(wù)器端代碼打包并不友好, 可能會(huì)導(dǎo)致打包的失敗, 用 babel-minify-webpack-plugin 插件來(lái)替代.

配合 source-map-support 插件來(lái)支持源碼的問(wèn)題定位.

示例項(xiàng)目源碼： https://github.com/AirDwing/w...

原文鏈接： https://leader.js.cool/#/expe...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • 9102年：手寫(xiě)一個(gè)React腳手架 【優(yōu)化極致版】

    摘要：馬上要出了，完全手寫(xiě)一個(gè)優(yōu)化后的腳手架是不可或缺的技能。每個(gè)依賴項(xiàng)隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節(jié)詳細(xì)討論這個(gè)過(guò)程。的事件流機(jī)制保證了插件的有序性，使得整個(gè)系統(tǒng)擴(kuò)展性很好。 webpack馬上要出5了，完全手寫(xiě)一個(gè)優(yōu)化后的腳手架是不可或缺的技能。 本文書(shū)寫(xiě)時(shí)間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫(xiě)，親自試驗(yàn)過(guò)可...

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

  • 9102年：手寫(xiě)一個(gè)React腳手架 【優(yōu)化極致版】

    摘要：馬上要出了，完全手寫(xiě)一個(gè)優(yōu)化后的腳手架是不可或缺的技能。每個(gè)依賴項(xiàng)隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節(jié)詳細(xì)討論這個(gè)過(guò)程。的事件流機(jī)制保證了插件的有序性，使得整個(gè)系統(tǒng)擴(kuò)展性很好。 webpack馬上要出5了，完全手寫(xiě)一個(gè)優(yōu)化后的腳手架是不可或缺的技能。 本文書(shū)寫(xiě)時(shí)間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫(xiě)，親自試驗(yàn)過(guò)可...

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

  • 9102年：手寫(xiě)一個(gè)React腳手架 【優(yōu)化極致版】

    摘要：馬上要出了，完全手寫(xiě)一個(gè)優(yōu)化后的腳手架是不可或缺的技能。每個(gè)依賴項(xiàng)隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節(jié)詳細(xì)討論這個(gè)過(guò)程。的事件流機(jī)制保證了插件的有序性，使得整個(gè)系統(tǒng)擴(kuò)展性很好。 webpack馬上要出5了，完全手寫(xiě)一個(gè)優(yōu)化后的腳手架是不可或缺的技能。 本文書(shū)寫(xiě)時(shí)間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫(xiě)，親自試驗(yàn)過(guò)可...

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

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

    摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁(yè)面應(yīng)用。 原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...

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

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

    摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁(yè)面應(yīng)用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...

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

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

0條評(píng)論

閱讀需要支付1元查看
<