我正在使用react starter kit进行客户端编程.它使用react和webpack.没有index.html或任何要编辑的html,所有js文件.我的问题是,如果我想从云加载供应商js lib,我该怎么做?
在html文件中很容易做到这一点. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
但是,在js文件中,它只使用npm安装的包.如何在没有html文件的情况下导入上面的lib?我尝试导入和require,它们只适用于本地文件.
更新10/21/15到目前为止,我尝试了两个方向,既不理想.
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Run Code Online (Sandbox Code Playgroud)
好消息是它有效,我不需要在js文件中做任何其他事情,没有导入或要求.但是,现在我有两个以不同方式加载的jquery库.一个在这里,另一个通过npm和webpack.我想知道以后会给我带来麻烦.如果我在浏览器窗口中键入无主路径,由于服务器端加载,我使用的react-routing给出了'未定义变量'错误.所以这个解决方案不是很好.
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>html.我试图将一个库从grunt/requirejs移植到webpack并偶然发现一个问题,这可能是这项努力的破坏者.
我尝试移植的库有一个函数,它可以加载和评估多个模块 - 基于我们从配置文件中获取的文件名 - 到我们的应用程序中.代码看起来像这样(咖啡):
loadModules = (arrayOfFilePaths) ->
new Promise (resolve) ->
require arrayOfFilePaths, (ms...) ->
for module in ms
module ModuleAPI
resolve()
Run Code Online (Sandbox Code Playgroud)
在require这里需要调用运行时其行为与它requireJS一样.Webpack似乎只关心"构建过程"中发生的事情.
这是webpack从根本上不关心的东西吗?如果是这样,我还可以使用requireJS吗?在运行时动态加载资产的好方法是什么?
编辑:loadModule可以加载模块,这些模块在此库的构建时不存在.它们将由实现我的库的应用程序提供.
我使用构建服务器来构建我的Vue项目,使用npm run buildVue 2模板提供的命令.Vue模板还提供了访问可在目录下的文件中配置的特定于环境的数据的功能config.喜欢的东西prod.env.js,等你再通过访问该数据process.env.API_PREFIX模板手动所见.
我希望能够构建一次代码,然后将相同的构建(由输出定义Dist)部署到多个服务器,但让不同的服务器使用不同的配置(不同的API_PREFIX等).目前,process.envWebpack编译器在构建时扩展了引用.因此,我必须为每个环境重建.
我可以想到几种方法来实现这一点 - 显然配置的加载必须在运行时进行,并且鉴于它在浏览器中运行并且必须引用某个文件,它必须通过AJAX请求Web服务器单独或类似地提供的一些静态JSON配置.但我有兴趣知道这里有人会如何处理这个要求.