Ich möchte benutzerdefinierte Parameter über die Befehlszeile übergeben. Etwas wie das:
webpack-dev-server --inline --hot --customparam1=value
Genau das, was ich erreichen möchte, ist, dass ich an einer Vue-Loader-Anwendung arbeite. Die Anwendung verfügt über bestimmte Dienste, die Daten abrufen.
Ich habe eine andere Anwendung, die als API-Server fungiert. Die Anwendung muss auf zwei Arten ausgeführt werden (da alle Mitglieder unseres Teams keinen Zugriff auf den API-Server haben)
Dieser Dienst hat also zwei Möglichkeiten, Daten abzurufen:
1) Wenn der API-Server ausgeführt wird (für das Entwicklerteam), verwenden Sie http-Aufrufe, um die Daten von localhost abzurufen
2) Wenn der API-Server nicht ausgeführt wird (für das Designteam), verwenden Sie einfach statische Daten, die bereits in den Diensten vorhanden sind:
var someData;
if (customparam1 === "withApi"){
someData=getData("http://localhost:8081/apiendpoint");
} else {
someData=[
{a:b},
{c:d},
// more custom array of static data
.....
]
}
Dieses customparam1 soll also von der Kommandozeile von webpack-dev-server übergeben werden und laut this documentation gibt es keinen Weg, den ich finden könnte (habe ich etwas verpasst?)
Wie mache ich es?
PS: Ich bin auf Webpack 1.12.1
Ich bin mir nicht so sicher, aber normalerweise mache ich das, um die Umgebung zu trennen:
befehl:
NODE_ENV=development webpack-dev-server
webpack.config.js (Plugin):
...
plugins:[
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
...
haupt-JS-Datei:
if(process.env.NODE_ENV !== 'production') { ... }
Ich glaube nicht, dass webpack-dev-server benutzerdefinierte Parameter analysieren kann, aber Sie können Folgendes versuchen:
befehl:
webpack-dev-server --customparam1=value
webpack.config.js:
var path = require("path");
var webpack = require("webpack");
function findPara(param){
let result = '';
process.argv.forEach((argv)=>{
if(argv.indexOf('--' + param) === -1) return;
result = argv.split('=')[1];
});
return result;
}
const customparam1 = findPara('customparam1');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
customparam1:JSON.stringify(customparam1)
})
]
};
haupt-JS-Datei:
if(customparam1 === xxx){ ... }
Sie können die Option --define
verwenden, für die var=value
als Argument verwendet wird. Webpack ersetzt einfach alle Vorkommen durch den Wert. Zum Beispiel mit folgendem Code:
if (ENABLE_API) {
// Use api
} else {
// Use static data
}
Wenn du rennst:
webpack-dev-server --inline --hot --define ENABLE_API
es wird ergeben:
if (true) {
// Use api
} else {
// Use static data
}
Sie müssten es auch mit --define ENABLE_API=false
ausführen, andernfalls wird eine Fehlermeldung ausgegeben, dass ENABLE_API
nicht definiert ist. Da es sich um eine einfache Textersetzung handelt, wird der übergebene Wert so eingefügt, wie er ist. Wenn Sie also eine Zeichenfolge möchten, müssen Sie '"value"'
(Anführungszeichen in Anführungszeichen) verwenden, da er sonst als reguläres JavaScript interpretiert wird eine Zeichenfolge, die von der Befehlszeile aus verwendet werden soll.
Sie können genau dasselbe erreichen, indem Sie webpack.DefinePlugin verwenden (ich habe die Dokumente zu Webpack 2 verlinkt, aber es funktioniert genauso in Webpack 1). Damit können Sie komplexere Ersetzungen vornehmen und Dienstprogramme wie JSON.stringify
verwenden, um eine Zeichenfolgenversion zu erstellen. Um beispielsweise das Problem der Übergabe einer Zeichenfolge über die Befehlszeile zu lösen, können Sie Folgendes verwenden:
new webpack.DefinePlugin({
API_TYPE: JSON.stringify(process.env.API_TYPE)
})
Führen Sie den Befehl mit der Umgebungsvariablen API_TYPE
aus, die auf withApi
festgelegt ist:
API_TYPE=withApi webpack-dev-server --inline --hot
und jeder API_TYPE
wird durch den String 'withApi'
ersetzt, wenn Sie ihn überhaupt nicht angeben, ist er nur undefiniert.
webpack-dev-server --customparam1=value
funktioniert nicht, nur bekannte Argumente werden von webpack-dev-server
zugelassen.
Es ist jedoch möglich, Umgebungsparameter (keine Umgebungsvariablen) an eine Webpack-Konfiguration zu übergeben, wenn diese als Funktion zurückgegeben wird.
Ein Befehlszeilenparameter --env.param=value
wie in:
webpack-dev-server --env.param=value
wird im webpack.config.js
wie folgt verfügbar sein:
module.exports = env => {
console.log(env.param)
return {
// normal webpack config goes here, as e.g.
entry: __dirname + "/src/app/index.js",
output: {
// ...
},
module: {
// ...
},
plugins: [
// ...
]
// ...
}
}
Solche Parameter können natürlich mit webpack.DefinePlugin
an die App übergeben werden, wie oben in der Antwort von @ AppleJam beschrieben.
Im webpack.config.js
, wenn Sie Konfiguration als Funktion exportieren (anstelle eines Objekts), können Sie leicht auf die bereitgestellten Optionen zugreifen:
module.exports = (env, argv) => {
const customparam1 = argv.customparam1;
// ...
}
Die Funktion wird mit zwei Argumenten aufgerufen:
- umgebung [...]
- Eine Optionszuordnung ( argv ) [...] (die die an das Webpack übergebenen Optionen beschreibt)
Hinweis :
Wenn Sie folgendes angeben:
webpack-dev-server --customparam1=true --customparam2=42
typeof argv.customparam1 // string
typeof argv.customparam2 // number
die Übergabe benutzerdefinierter Parameter ist im webpack-dev-server jedoch nicht zulässig.
wir können jedoch einige vorhandene Parameter wie --env --define --open verwenden, um unsere eigenen Werte zu übergeben.
einfach schreiben:
webpack-dev-server --env=someparams
dann können Sie die yargs verwenden, um Ihre Parameter zu lesen.
erledigt!