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

資訊專欄INFORMATION COLUMN

webpack 巧解環(huán)境配置問(wèn)題

siberiawolf / 473人閱讀

摘要：項(xiàng)目的開(kāi)發(fā)和測(cè)試和生產(chǎn)環(huán)境一般都不是同一個(gè)，有時(shí)候就會(huì)產(chǎn)生需要前端項(xiàng)目需要根據(jù)不同的環(huán)境進(jìn)行不同的配置的情況。比較經(jīng)典的情況就是后端的接口的問(wèn)題。當(dāng)前也不要忘記了和上面一樣設(shè)置一下環(huán)境變量哦其它當(dāng)然像這個(gè)問(wèn)題的回答中直接使用也是可以的。

項(xiàng)目的開(kāi)發(fā)和測(cè)試和生產(chǎn)環(huán)境一般都不是同一個(gè)，有時(shí)候就會(huì)產(chǎn)生需要前端項(xiàng)目需要根據(jù)不同的環(huán)境進(jìn)行不同的配置的情況。比較經(jīng)典的情況就是后端的接口 hostname 的問(wèn)題。在開(kāi)發(fā)環(huán)境的時(shí)候可能使用的是 dev.api.xx.com，測(cè)試環(huán)境需要使用 test.api.xx.com，而線上環(huán)境需要使用 api.xx.com。那么如何根據(jù)環(huán)境來(lái)動(dòng)態(tài)的在文件中變更這個(gè)值而不用我們手動(dòng)的在服務(wù)器上修改代碼呢？我們可以利用 webpack module shim 的一些方法。

就拿上文中的例子，我們?nèi)绾卧诓煌h(huán)境編譯的時(shí)候使用不同的 API 地址。webpack shim module 一共有好幾種方法，我們來(lái)看下都可以怎么解決。

ProvidePlugin

ProvidePlugin 可以讓變量直接在模塊里加載而不需要使用 require 等方法。所以我們可以預(yù)先定義一些模塊根據(jù)不同的環(huán)境裝載不同的模塊：

//development.js
module.exports = { baseUrl: "http://dev.api.xx.com" };

//production.js
module.exports = { baseUrl: "http://api.xx.com" };

//test.js
module.exports = { baseUrl: "http://test.api.xx.com" };

//webpack.config.js
var webpack = require("webpack");
module.exports = {
    entry: "main.js",
    output: {path: "./", filename: "bundle.js"},
    plugins: [
        new webpack.ProvidePlugin({
            ENV: "./env/"+ (process.env.NODE_ENV || "development")
        })
    ]
};

然后我們?cè)诃h(huán)境變量中定義 NODE_ENV 變量幫助 node 識(shí)別環(huán)境，例如：

//Windows
set NODE_ENV=test 
//Linux or OSX
export NODE_ENV=test

這樣在 webpack 編譯的時(shí)候就能判別出是 test 環(huán)境使用 test 的環(huán)境變量了，我們直接在代碼中使用 ENV.baseUrl 即可。

imports-loader

如果覺(jué)得使用 ProvidePlugin 略微麻煩的話我們也可以使用 imports-loader 來(lái)實(shí)現(xiàn)我們需要的功能。imports-loader 的作用是將變量注入到模塊中，首先我們需要 npm install imports-loader 安裝這個(gè) loader。在 webpack.config.js 中我們進(jìn)行如下操作：

var API = {
    test: "http://test.api.xx.com",
    production: "http://api.xx.com",
    development: "http://dev.api.xx.com"
};

module.exports = {
    entry: "main.js",
    output: {path: "./", filename:"bundle.js"},
    module: {
        loaders: [
            { 
                test: require.resolve("ajax"),
                loader: "imports-loader?baseUrl=>"+ JSON.stringify( API[ process.env.NODE_ENV || "development" ] )
            }
        ]
    }
};

這樣我們?cè)谝?ajax 這個(gè)模塊的時(shí)候就會(huì)觸發(fā)這個(gè) laoder 將 baseUrl 這個(gè)變量注入到 ajax 模塊中，所以我們可以直接在 ajax 模塊中使用 baseUrl 變量即可。當(dāng)前也不要忘記了和上面一樣設(shè)置一下 NODE_ENV 環(huán)境變量哦！

其它

當(dāng)然像 http://stackoverflow.com/ques... 這個(gè)問(wèn)題的回答中直接使用 DefinePlugin 也是可以的。

參考資料：

http://stackoverflow.com/ques...

http://stackoverflow.com/ques...

https://webpack.github.io/doc...

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

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

相關(guān)文章

  • webpack 項(xiàng)目構(gòu)建：（三）開(kāi)發(fā)環(huán)境——本地服務(wù)器搭建

    摘要：上一章我們了解了的編譯環(huán)境搭建項(xiàng)目構(gòu)建二編譯環(huán)境搭建這一章我們會(huì)結(jié)合的，介紹本地測(cè)試服務(wù)器的搭建過(guò)程。三開(kāi)發(fā)環(huán)境有一些特性是專門用于開(kāi)發(fā)環(huán)境的，可以幫助我們搭建一個(gè)更好的開(kāi)發(fā)環(huán)境。我們可以通過(guò)配合使用來(lái)搭建本地服務(wù)。 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

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

  • 使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄，根據(jù)頁(yè)面文件自動(dòng)更改配置

    摘要：官方推薦不寫(xiě)重復(fù)的配置，即把本地和生產(chǎn)環(huán)境共用的配置放到一個(gè)文件，然后通過(guò)進(jìn)行合并我們可以看到，通過(guò)插件，將共用配置和開(kāi)發(fā)的配置進(jìn)行合并定義了全局變量這個(gè)插件是為了在我們?cè)试S后，自動(dòng)打開(kāi)頁(yè)面，避免每次都手動(dòng)打開(kāi)。 之前只知道webpack很強(qiáng)大，但是一直沒(méi)有深入學(xué)習(xí)過(guò)，這次從頭看了一下教程，然后從0開(kāi)始搭建了一個(gè)多入口網(wǎng)站的開(kāi)發(fā)腳手架，期間遇到過(guò)很多問(wèn)題，所以有心整理一下，希望能給大家...

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

  • 使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄，根據(jù)頁(yè)面文件自動(dòng)更改配置

    摘要：官方推薦不寫(xiě)重復(fù)的配置，即把本地和生產(chǎn)環(huán)境共用的配置放到一個(gè)文件，然后通過(guò)進(jìn)行合并我們可以看到，通過(guò)插件，將共用配置和開(kāi)發(fā)的配置進(jìn)行合并定義了全局變量這個(gè)插件是為了在我們?cè)试S后，自動(dòng)打開(kāi)頁(yè)面，避免每次都手動(dòng)打開(kāi)。 之前只知道webpack很強(qiáng)大，但是一直沒(méi)有深入學(xué)習(xí)過(guò)，這次從頭看了一下教程，然后從0開(kāi)始搭建了一個(gè)多入口網(wǎng)站的開(kāi)發(fā)腳手架，期間遇到過(guò)很多問(wèn)題，所以有心整理一下，希望能給大家...

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

  • webpack開(kāi)發(fā)與生產(chǎn)環(huán)境配置

    摘要：豹哥對(duì)于剛開(kāi)始小白的自己雖然現(xiàn)在也白知無(wú)不談，而且回復(fù)超快超認(rèn)真。這里真的很感謝豹哥。是項(xiàng)目啟動(dòng)時(shí)的一些文件，如的配置文件開(kāi)發(fā)環(huán)境服務(wù)配置文件一些簡(jiǎn)單工具函數(shù)等等。是關(guān)于整個(gè)項(xiàng)目的環(huán)境配置包括開(kāi)發(fā)與生產(chǎn)。 前言 作者去年就開(kāi)始使用webpack, 最早的接觸就來(lái)自于vue-cli。那個(gè)時(shí)候工作重點(diǎn)主要也是 vue 的使用，對(duì)webpack的配置是知之甚少，期間有問(wèn)題也是詢問(wèn)大牛 @呂大...

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

  • webpack4 的生產(chǎn)環(huán)境優(yōu)化

    摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個(gè)項(xiàng)目有變動(dòng)時(shí)，變化。而生產(chǎn)環(huán)境可以這一項(xiàng)，因?yàn)槲覀儾恍枰谏a(chǎn)環(huán)境調(diào)試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<