为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

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


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


查看完整描述

3 回答

?
幕布斯5086720

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


查看完整回答
反对 回复 2019-10-09
?
慕村9548890

使用scripts:[]then向<head>with 添加一些东西之间有细微的差别<script>。来自的脚本scripts:[]会添加到,scripts.bundle.js该脚本始终会加载到body标签中,因此会在中的AFTER脚本后加载<head>。因此,如果脚本加载顺序很重要(即,您需要加载全局polyfill),那么您唯一的选择是手动将脚本复制到文件夹(例如,使用npm脚本),并将此文件夹作为资产添加到中.angular-cli.json。


因此,如果您真的依赖于在 angular本身之前加载的东西(选项A),那么您需要将其手动复制到角度构建中将包含的文件夹中,然后可以使用<script>in 手动加载它<head>。


因此,要实现选项a,您必须:


在以下位置创建一个vendor文件夹src/

将此文件夹作为资产添加到.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>


然而,大多数的时候你只需要这种方法进行包装,需要进行全球上市,之前的一切(即某些polyfills)。克里斯(Kris)的答案对选项B成立,您将从webpack的构建中受益(缩小,哈希等等)。


但是,如果您的脚本不需要在全球范围内可用,并且它们已经准备好用于模块,则可以将其导入,src/polyfills.ts甚至更好地仅在特定组件中需要它们时才导入它们。


通过scripts:[]或手动加载脚本使脚本在全局范围内可用会带来一系列问题,并且仅在绝对必要时才应使用。


查看完整回答
反对 回复 2019-10-09

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信