Angular Cli Webpack，如何添加或捆绑外部js文件？

小编典典

Angular Cli Webpack，如何添加或捆绑外部js文件？

javascript

我不确定将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库，它们实际上并未为模块加载或打字稿设置。

阅读 416

2020-05-01

共1个答案

小编典典

上次使用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';。

2020-05-01