当前位置: 首页 > 面试题库 >

Angular Cli Webpack,如何添加或捆绑外部js文件?

劳星晖
2023-03-14
问题内容

我不确定将Angular Cli从SystemJs切换到Webpack后如何包括JS文件(供应商)。

例如

选项A

我有一些通过npm安装的js文件。 这样无法将脚本标签添加到head标签。似乎也不是最好的方法。

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

选项B

将这些js文件作为webpack捆绑包的一部分包含在内。这似乎是应该完成的方式。但是我不确定如何执行此操作,因为所有webpack代码似乎都隐藏在angular-cli-webpack节点包的后面。我在想,也许还有另一个我们可以访问的webpack配置。但是我不确定,因为在创建新的angular-cli-webpack项目时没有看到。

更多信息:

我要包含的js文件需要在Angular项目之前包含在内。例如jQuery和第三方js库,它们实际上并未为模块加载或打字稿设置。


问题答案:

上次使用angular-cli 7.xx和Angular 7.xx进行测试

可以使用scripts:[]in 来完成.angular-cli.json

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

注意: 正如文档在全局库安装中所建议的那样:如果您更改styles(或scripts!)属性的值,则:

如果正在运行,请重新启动服务,

..以查看通过scripts.bundle.js文件在** globalcontext中执行的脚本。

注意: 如以下注释中所述。也可以使用es6导入语法将通过es6导入(例如jQuery)支持UMD模块的JS库导入到您的打字稿文件中。例如:import$ from 'jquery';



 类似资料:
  • 问题内容: 我有一个电子应用程序。我尝试使该应用程序打开一个.exe文件。我在根文件夹中创建了一个目录,并将.exe文件放置在该目录中。在开发中,使用可以打开文件没有问题,但是当我打包应用程序(使用)时,它不会打开exe文件,并且该文件夹上也没有文件夹。 我尝试编写使用来控制台默认位置的脚本,并输出(文件)。 打包应用程序后,如何添加可以访问的外部文件? 问题答案: 通过使用extraResour

  • 本文向大家介绍JS加载器如何动态加载外部js文件,包括了JS加载器如何动态加载外部js文件的使用技巧和注意事项,需要的朋友参考一下 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js JsLoader.js测试 测试结果如下:

  • 我使用EclipseIndigo使用OSGiJava框架开发了一些包。有一个主捆绑包,它依赖于其他捆绑包,并且具有要运行的主程序。如果我尝试在Eclipse中运行所有捆绑包,一切都正常工作,但是如果我将每个捆绑包保存为一个JAR,并在命令行中启动OSGi框架,当我尝试启动主捆绑包时,会出现异常<code>NoClassDefFoundError。找不到的类是依赖项。包的其余部分处于活动状态,主包刚

  • 问题内容: 我必须为支付网关使用两个外部脚本。现在,两者都放入文件中。但是,我不想在一开始就加载这些文件。仅在用户打开特定组件()时才需要支付网关。 反正有实现这个目标的方法吗? 问题答案: 解决此问题的一种简单有效的方法是将外部脚本添加到组件的Vue中。我将用GoogleRecaptcha脚本向您说明:

  • 问题内容: 我有一个外部文件 我想将此文件添加到我的React-Redux App中 谁能帮我解决这个难题 问题答案: 导出您的js代码,然后将其导入您的react组件中。 然后,您可以将其导入您的react组件中。 然后在您的react组件中调用它,例如,在诸如之类的react生命周期方法中。 另一种(更快)的方法是在您的react组件中使用来加载js代码。 这样,您就可以立即加载js代码,而无

  • 背景资料 我有一个spring boot应用程序,它有文件添加到资源文件的文件夹中,该文件最终内置到执行中使用的jar文件中。 这个jar应用程序需要在不同客户机的多个实例中运行。所以我所做的就是创建一个外部文件,用于区分每个用户的设置。http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-exter