同构JS应用程序中的环境变量:Webpackfind&代替
Environment Variables in an isomorphic JS app: Webpack find & replace?
我正在使用webpack捆绑同构的JS应用程序(基于此示例),以便浏览器运行与服务器相同的代码。一切都运行得很顺利,除了我有一个config.js
,它有一些设置,这些设置是从服务器上的环境变量中提取的:
module.exports = {
servers:
auth: process.env.AUTH_SERVER_URL,
content: process.env.CONTENT_SERVER_URL
}
}
在服务器上,这是伟大的,但当webpack为客户端呈现时,process
是空的,这不起作用。
我希望有一种"查找并替换"的webpack插件,可以单独用文件中的内容来替换它们?
"…config.js content…".replace(/process'.env'.([a-z0-9_]+)/, function(match, varName) {
return process.env[varName];
})
请注意,按照接受的答案中的建议使用DefinePlugin
可能是一种危险的操作,因为它完全暴露了process.env
。正如Tobias在上面评论的那样,实际上有一个插件EnvironmentPlugin
可以做到这一点,并在内部使用DefinePlugin
添加了白名单功能。
在您的webpack.config.js
:中
{
plugins: [
new webpack.EnvironmentPlugin([
'NODE_ENV',
'WHITELISTED_ENVIRONMENT_VARIABLE'
])
]
}
在webpack.config.js
中,使用以下preLoaders
(或postLoaders
),
module: {
preLoaders: [
{ test: /'.js$/, loader: "transform?envify" },
]
}
使用webpack.DefinePlugin
:的另一种方法
plugins: [
new DefinePlugin({
'process.env': Object.keys(process.env).reduce(function(o, k) {
o[k] = JSON.stringify(process.env[k]);
return o;
}, {})
})
]
注意:使用envify-loader
的旧方法已被弃用:
已弃用:请改用转换加载程序+envify。
是的;看起来envify-loader是一个简单的解决方案。
我刚刚在我的webpackloader中添加了以下内容:
{
test: /config'.js$/, loader: "envify-loader"
}
并且config.js
(并且只有该文件)被修改为静态地包括任何引用的环境变量:)
我需要一种方法来使用在运行代码的机器上设置的env变量,而不是构建应用程序的机器的env参数。
我还看不到解决这个问题的办法。这就是我所做的。
在publicEnv.js
中:
// List of the env variables you want to use on the client. Careful on what you put here!
const publicEnv = [
'API_URL',
'FACEBOOK_APP_ID',
'GA_ID'
];
const isBrowser = typeof window !== 'undefined';
const base = (isBrowser ? window.__ENV__ : process.env) || {};
const env = {};
for (const v of publicEnv) {
env[v] = base[v];
}
export default env;
在页面的HTML模板文件中,我有:
import publicEnv from 'publicEnv.js';
...
<script>
window.__ENV__ = ${stringify(publicEnv)};
// Other things you need here...
window.__INITIAL_STATE__ = ${stringify(initialState)};
</script>
因此,现在我可以使用在前端和后端获得env变量的值
import publicEnv from 'publicEnv.js';
...
console.log("Google Analytic code is", publicEnv.GA_ID);
我希望它能有所帮助。
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Angular js-返回一个包含类似
- 一点javascript元编程&可链接的设置器
- 通过JSON&比较时间
- Jquery模板,如果xx&&如果yy
- jQuery工具验证器自定义效果-添加&消除影响
- Twitter引导程序Typeahead-Id&标签
- AngularJS&JSON-从Previous&下一个对象
- 什么是&&在没有if的行中的变量之间
- 关于引入外部javascript文件的问题&css通过https
- 指令的模板必须只有一个根元素:With restrict E&替换true
- 使用ajax的服务器端分页&jQuery
- Javascript,如果条件在没有&&逻辑运算符当&&它不起作用
- 如何使用dropzone&vueJs
- 如何准确执行加载脚本&退出弹出窗口
- 如何添加CSS&JavaScript进入Windows窗体应用程序C#.net
- Solr查询以按日期月份获取数据&年
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- 同构JS应用程序中的环境变量:Webpackfind&代替