首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 6-如何向vendor.js添加另一个库

在Angular 6中,要向vendor.js添加另一个库,可以按照以下步骤进行操作:

  1. 首先,确保你已经安装了该库的npm包。可以通过运行以下命令来安装该库:
代码语言:txt
复制
npm install <library-name>
  1. 在Angular项目的根目录中,打开angular.json文件。
  2. projects下找到你的项目名称,然后找到architect -> build -> options -> scripts
  3. scripts数组中添加一个新的元素,指向该库的脚本文件。例如:
代码语言:txt
复制
"scripts": [
  "node_modules/<library-name>/dist/<library-name>.min.js"
]
  1. 保存angular.json文件。
  2. 在终端中运行以下命令重新构建你的Angular项目:
代码语言:txt
复制
ng build
  1. 构建完成后,该库的脚本文件将被添加到生成的vendor.js文件中。

请注意,<library-name>应该替换为你要添加的库的实际名称。此外,如果该库还有其他依赖项,你可能需要将这些依赖项的脚本文件也添加到scripts数组中。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议你参考腾讯云官方文档或咨询腾讯云的技术支持团队,以获取与你的需求匹配的产品和相关信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用Angular CLI和PM2运行Angular应用程序

Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...第1步:在Linux中安装Node.js 要安装最新版本的Node.js,首先在系统上添加NodeSource存储,如图所示,然后安装该软件包。...chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered] chunk {vendor} vendor.js...Angular CLI主页:https://angular.io/cli PM2主页:http://pm2.keymetrics.io/ 在本指南中,我们展示了如何使用Angular

2.2K30
  • 如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南 本文翻译自How to Install Angular on Windows: A Guide to...安装 Angular CLI 后,您需要运行一个命令来生成一个项目,并运行另一个命令来使用本地开发服务器来运行您的应用程序。...近年来,它还被用来发布前端包和,如 Angular、React、Vue.js 甚至 Bootstrap。...让我们首先检查已安装的 CLI 的版本: $ ng version 如下图所示: 您可能需要运行的第二个命令是 help 命令,用于获取完整的使用帮助: $ ng help CLI 提供以下命令: add: 您的项目添加对外部的支持...如果您想将组件、指令或管道添加另一个模块 (主应用程序模块 app.module.ts 除外),您只需在组件名称前加上模块名称和斜杠 即可: $ ng g component my-module/my-component

    46800

    9个不错的前端开源项目

    为了帮助你在2020年成为前端大师,我收集了9个不同的项目,每个项目都有不同的主题和不同的JavaScript框架或作为技术栈,您可以构建它们并将它们添加到学习计划中。...您将学到什么 本教程将您展示如何使用svelte3制作一个应用程序,从开始到结束。它使用组件、样式和事件处理程序。...您将学到什么 虽然其他项目主要关注Web应用程序,但本项目将您展示如何通过Quasar框架使用Vue创建移动应用程序。...如果没有,该教程中将有一个指向Quasar网站的链接,在那里他们您展示了如何进行设置。...总结 在本文中,我您展示了可以构建的9个项目,每个项目都专注于另一个JavaScript框架或。 现在,选择权全由您自己决定:您是否会使用以前未使用的框架来尝试一些新的东西?

    6.9K30

    Angular 6.0 即将发布 承诺更小更快更易用

    本月早些时候,Angular 团队发布了 6.0 的第五版候选版本 ,其中包括一些错误修复以及添加令牌标记和支持配置导航网址。...首先,他们公众发布了新闻稿,其中包括团队对 Angular 所做的每一项变更,并将其合并到主分支中。...第二个是谷歌将所有的 Angular 源代码放在一个存储中,这意味着 Angular 的每一个变化都已经在谷歌的超过 500 种产品中使用。...版本 6 也更新为 RxJS,即,使用 Observables 进行反应式编程的 。 根据 Angular 的说法,这使得编写异步或基于回调的代码更容易。...版本 6 的另一个预期功能是用于 Angular Material 和 Component Dev Kit 的树组件。 除了 6.0 版之外,该团队正在重写视图引擎并增加对 Bazel 的支持。

    96920

    无需框架,就能实现微前端,理解起来通俗易懂

    为什么需要微前端 假设你正在一个项目中使用一个特定的框架或(比如React.js),但你需要切换到另一个框架或,或者添加另一个另一个框架(比如Angular.js)上编写的模块。...如果你不需要改变任何东西,你可以用你选择的另一个框架开始添加新模块呢?这就是微前端出现的地方。...如何构建微前端 现在让我们来看看如何构建一个真正的应用,以及如何使用微前端集成两个框架,React和Angular。这里出现的第一个问题是,我们应该如何划分应用,因为没有特定的标准来划分它们。...问题是如何设置这些子应用的位置? 要设置子应用程序的位置,只需在Webpack配置文件中为每个子应用程序的module.exports.output对象添加两个条目。...这时候你就必须考虑如何在应用程序之间实现通信系统。 通信 这里的子应用程序彼此是完全独立的,但我们可以通过使用像 eev 事件总线这样的让它们在某些事件上相互通信。

    2K20

    Vue相关的前端面试题,每道题都很经典~

    ④:如何阻止Vue中的绑定事件不发生冒泡 ⑤:父、子组件间是如何通信的? ⑥:非父子层级的组件如何实现通信? ⑦:什么是动态组件?他的作用是什么?...答案与详解 Q 说说Vue和Angular、ReactJS的相同点和不同点 与React的相同: ●都使用了Virtual DOM ●提供了响应式和组件化的视图组件 ●将注意力集中保持在核心,而将其他功能如路由和全局状态管理交给相关的...与Angular的相同: Vue早起的灵感是来源于Angular,所以很多语法是类似的,如v-if和ng-if。...与Angular的区别: ●与Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会出触发另一个更新,使得“脏检查循环...父组件通过Props子组件传递数据,而子组件通过Events父组件传递数据。 ? 来自vue官网 Q 非父子层级的组件如何实现通信?

    11.1K30

    webpack 项目 cssjs主域重试

    css 主域重试 css 的作用就是改变元素的样式,从这一点出发,我们可以想出如下的方案: 首先向 css 文件添加一条规则; 接着 html 文件中添加一个元素,最后通过 js 判断第一步中添加的规则是否起作用...这种方案可以形象地叫做“埋点”: html 文档中埋入一个检查点。 通过一个具体的例子来看看如何实现。...首先,假设有如下 css 代码: /* old css_example1.css */ .elvin { font-size: 16px; } 然后,其中添加一条规则: /* new css_example1...需要说明的是,上述 css 添加规则和 html 注入代码都是通过监听 webpack 的 'done' 事件进行的自动操作,并不需要手动的去插入这些代码。...这一想法是符合用 webpack 打包的项目的实际情况的:使用 webpack 打包的项目每个页面一般引入三个 js 文件: vendor.js:整个项目的基础打包成该文件; common.js:将多个

    1.5K100

    Angular 6的新特性介绍

    通过ng add可以更加容易项目中添加新功能(类似npm install ) Angular Material+CDK组件 angular6最大的补充是用于显示分层数据的新树组件。...遵循数据表组件的模式,CDK包含核心树指令,而Angular Material则提供与顶层的Material Design样式相同的体验 Material 运行命令,添加Material ng add...一旦添加Material之后,你就可以生成三个新的入门组件 Material Sidenav 运行命令: ng generate @angular/material:material-nav --name...ng generate library 这个命令将在你的CKI工作空间创建一个项目,并且自动添加配置信息到angular.json文件和tsconfig.json中。...如何升级到6.0.0 按照引导对应用进行升级 ? 更新通常遵循3个步骤,并将利用新ng update工具。

    2.3K21

    移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

    Angular 团队提到,View Engine 将在后续版本中被彻底移除。目前使用 View Engine 的仍可与 Ivy 应用配合使用,但开发团队建议各位作者提早 Ivy 过渡。...由于 View Engine 函数的存在,Angular 暂时还无法移除旧的实例化,这导致维护成本不断增加,Angular 整体发展速度也被拖慢。...用于 TyperScript 类中写入清晰代码的 Nullish 合并,现可以与 Angular 模板配合使用。...新版本 localize-extract 中添加一种新的格式,名为 legacy-migrate。此格式可用于生成 JSON 文件,进而将旧版消息 ID 映射为规范 ID。... Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。

    4.4K10

    前端练级攻略(第二部分)

    本文是 前端练级攻略 第二部分,第一部分请看下面: 前端练级攻略(第一部分) 在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如何界面添加交互性,JavaScript 设计和架构模式...如何查询元素 如何添加事件监听? 如何更改 DOM 节点属性? 有关常见的 JavaScript DOM 交互的列表,请查看 PlainJS 的 JavaScript 函数和助手。...React + Flux Angular 解决了开发人员在构建复杂的前端系统时所面临的许多问题。另一个流行的工具是 React,它是一个用于构建用户界面的。你可以把它想象成 MVC 中的 V。...使用Angular构建一个Etsy克隆,Stamplay 将教你如何使用 Angular 构建一个 web 应用程序,如何使用 api 构建接口,以及如何构造大型项目。...MVC/MVVM 如何应用于 Angular? 什么是API,它做什么 如何组织和构造大型代码 将 UI 分解为指令组件有什么好处?

    3.8K00

    webpack提升构建速度

    也许某一天你负责的项目也会到了需要优化 webpack 构建性能的时候,所以这一章节我们来聊聊如何提升 webpack 的构建速度。...提升 webpack 构建速度本质上就是想办法让 webpack 少干点活,活少了速度自然快了,尽量避免 webpack 去做一些不必要的事情,记得这个主要方向,后续的针对构建速度的优化都是围绕着这一方展开...resolve 配置,如果我们可以精简 resolve 配置,让 webpack 在查询模块路径时尽可能快速地定位到需要的模块,不做额外的查询工作,那么 webpack 的构建速度也会快一些,下面举个例子,介绍如何在...path: path.resolve(__dirname, "dist"), filename: "vendor.js", library: "vendor_[hash]" // 打包后对外暴露的类名称...dirname, "dist/manifest.json"), // 使用 DLLPlugin 在打包的时候生成一个 manifest 文件 }) ],}然后就是我们正常的应用构建配置,在那个的基础上添加两个一个新的

    530180

    webpack 项目 cssjs主域重试

    css 主域重试 css 的作用就是改变元素的样式,从这一点出发,我们可以想出如下的方案: 首先向 css 文件添加一条规则; 接着 html 文件中添加一个元素,最后通过 js 判断第一步中添加的规则是否起作用...这种方案可以形象地叫做“埋点”: html 文档中埋入一个检查点。 通过一个具体的例子来看看如何实现。...首先,假设有如下 css 代码: /* old css_example1.css */ .elvin { font-size: 16px; } 然后,其中添加一条规则: /* new css_example1...需要说明的是,上述 css 添加规则和 html 注入代码都是通过监听 webpack 的 'done' 事件进行的自动操作,并不需要手动的去插入这些代码。...这一想法是符合用 webpack 打包的项目的实际情况的:使用 webpack 打包的项目每个页面一般引入三个 js 文件: vendor.js:整个项目的基础打包成该文件; common.js:将多个

    1.1K60
    领券