相关疑难解决方法(0)

如何使用webpack在js文件中加载CDN或外部供应商javascript lib,而不是在html文件中

我正在使用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到目前为止,我尝试了两个方向,既不理想.

  1. @minheq是的,有一个html文件类型的反应启动工具包.它是src/components/Html下的html.js.我可以将cloud lib及其所有依赖项放在那里:
        <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给出了'未定义变量'错误.所以这个解决方案不是很好.

  1. 使用webpack externals功能.这记录为:link."当你想将现有的API导入到包中时,你也可以使用外部选项.你想在CDN中使用jquery(单独的标签),但仍然想在你的包中要求("jquery").将其指定为external:{externals:{jquery:"jQuery"}}." 但是,我发现一些地方的文档都非常挑剔如何准确地做到这一点.到目前为止,我不知道如何使用它来替换<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>html.

javascript node.js reactjs webpack

40
推荐指数
4
解决办法
4万
查看次数

使用webpack在运行时动态地需要JS文件

我试图将一个库从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可以加载模块,这些模块在此库的构建时不存在.它们将由实现我的库的应用程序提供.

javascript requirejs webpack

24
推荐指数
2
解决办法
2万
查看次数

使用Vue webpack模板进行环境独立构建

我使用构建服务器来构建我的Vue项目,使用npm run buildVue 2模板提供的命令.Vue模板还提供了访问可在目录下的文件中配置的特定于环境的数据的功能config.喜欢的东西prod.env.js,等你再通过访问该数据process.env.API_PREFIX模板手动所见.

我希望能够构建一次代码,然后将相同的构建(由输出定义Dist)部署到多个服务器,但让不同的服务器使用不同的配置(不同的API_PREFIX等).目前,process.envWebpack编译器在构建时扩展了引用.因此,我必须为每个环境重建.

我可以想到几种方法来实现这一点 - 显然配置的加载必须在运行时进行,并且鉴于它在浏览器中运行并且必须引用某个文件,它必须通过AJAX请求Web服务器单独或类似地提供的一些静态JSON配置.但我有兴趣知道这里有人会如何处理这个要求.

javascript deployment build webpack vue.js

9
推荐指数
1
解决办法
612
查看次数

标签 统计

javascript ×3

webpack ×3

build ×1

deployment ×1

node.js ×1

reactjs ×1

requirejs ×1

vue.js ×1