У меня была проблема. Я хотел получить доступ к некоторым env-переменным внутри браузера.
Я делал это так:
new webpack.DefinePlugin({
'NODE_ENV': JSON.stringify(process.end.NODE_ENV),
'API_URL': JSON.stringify(process.env.API_URL)
})
Это прекрасно работает, но работает во время сборки, и мне нужно, чтобы переменные менялись во время выполнения.
У меня есть простой экспресс-сервер для запуска моего приложения. Чтобы сделать то, что мне было нужно, это было мое решение:
const Transform = require('stream').Transform;
const parser = new Transform();
parser._transform = function(data, encoding, done) {
const str = data.toString().replace('<head>', `<head>
<script>
const API_URL = "${process.env.API_URL}"
const NODE_ENV = "${process.env.NODE_ENV}"
</script>`);
this.push(str);
done();
};
if (fs.existsSync(DIST_DIR)) {
app.use(express.static(DIST_DIR))
app.get("*", (req, res) => {
res.write('<!-- Begin stream -->\n');
fs.createReadStream(HTML_FILE)
.pipe(parser)
.on('end', () => {
res.write('\n<!-- End stream -->')
})
.pipe(res);
})
app.listen(process.env.PORT || 3000, '0.0.0.0', () => {
console.log('Listening on port %d', process.env.PORT || 3000);
})
} else {
throw new Error ("No build was found in the ../dist folder. Please run 'npm run build'.")
}
Я в основном изменяю свой файл index.html на лету во время его обслуживания. Это похоже на плохую практику, но в то же время это работает так хорошо.
Что вы, ребята, думаете об этом? Есть ли лучший способ сделать это?