首页 文章

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

提问于
浏览 次
68

在将Angular Cli从SystemJs切换到Webpack之后，我不确定如何包含JS文件（供应商） .

For example

选项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项目时没有看到 .

More Info:

我想要包含的js文件需要包含在Angular项目之前 . 例如jQuery和第三方js lib，它不是真正设置模块加载或打字稿 .

References https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

javascript angular angular-cli

5 回答

  • -1

    Last tested using angular-cli 1.0.0 with Angular 4.0.0

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

    {
  "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
  }
}

    Note: 在全局库安装中为the documentation suggests：如果更改 styles （或 scripts ！）属性的值，则：

    如果您正在运行，请重新启动ng服务，

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

    Note: 如下面的评论所述 . 通过es6 imports支持UMD模块的JS库（如jQuery）也可以使用es6导入语法导入到您的打字稿文件中 . 例如： import $ from 'jquery'; .

    回复于
  • 80

    使用 scripts:[] 然后使用 <script> 向 <head> 添加内容有一个细微的区别 . 来自 scripts:[] 的脚本被添加到 scripts.bundle.js ，它总是被加载到body标签中，因此将在 <head> 中加载 AFTER 脚本 . 因此，如果脚本加载顺序很重要（即您需要加载全局polyfill），那么您唯一的选择是手动将脚本复制到文件夹（例如使用npm脚本）并将此文件夹作为资源添加到 .angular-cli.json .

    因此，如果您真的依赖于加载 before angular本身（选项A）的内容，那么您需要手动将其复制到将包含在角度构建中的文件夹中，然后您可以使用 <script> 中的 <script> 手动加载它 .

    因此，要实现选项a，您必须：

    • 在 src/ 中创建 vendor 文件夹

    • 将此文件夹添加为 .angular-cli.json 的资产： "assets": [ "assets", "favicon.ico", "vendor" ]

    • 将供应商脚本 node_modules/some_package/somejs.js 复制到 vendor

    • 在 index.html 中手动加载： <head> <script src="vendor/some_package/somejs.js"> </head>

    然而，大多数情况下，您只需要这种方法用于包，这需要全局可用，其他所有方法（即某些polyfill） . Kris的回答适用于选项B，您可以获得webpack构建（Minification，Hashes，...）的好处 .

    但是，如果您的脚本 need not 是全局可用的，并且如果它们 are module-ready 您可以在 src/polyfills.ts 中导入它们，或者甚至更好地仅在特定组件中需要它们时才导入它们 .

    通过 scripts:[] 或通过手动加载脚本使脚本全局可用会带来一系列问题，并且只有在绝对必要时才应该使用它们 .

    回复于
  • 3

    您需要打开文件 .angular-cli.json 文件并需要搜索 "scripts:" 或者如果要添加外部css，则需要在同一文件中找到单词 "styles": .

    如下所示，您将看到引导程序Js（ bootstrap.min.js ）和引导程序CSS（ bootstrap.min.css ）如何包含在_1046145中：

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

    如果您有自己的js文件，可以在 .angular-cli.json 中的同一位置（在 "scripts":[] 中）添加文件路径 .

    回复于
  • 8

    您可能需要查看此页面：https://github.com/angular/angular-cli#global-library-installation

    它显示了如何包含.js和.css文件的基础知识

    有些javascript库需要添加到全局范围，并像加载在脚本标记中一样加载 . 我们可以使用angular-cli.json的apps [0] .scripts和apps [0] .styles属性来完成这项工作 .

    回复于
  • 1

    我目前正在使用Angular / Webpack构建 . 为了向我的应用程序提供jQuery和其他供应商，我使用webpack的插件 ProvidePlugin() . 这通常会出现在 webpack.config.js 中：这里's an example for jquery, lodash and moment libraries. Here'是指向documentation的链接（充其量是模糊的）

    plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash',
    moment: 'moment',
  })
]

    令人难以置信的是，它实际上允许您立即使用它，提供所有其他webpack设置已正确完成并已安装 npm .

    回复于

相关问题