Angular CLI, Node.js, and Build Tools，作者为Ahmed Bouchefra 在本教程中，我们将学习如何在 Windows 中安装 Angular CLI 并使用它来创建...近年来，它还被用来发布前端包和库，如 Angular、React、Vue.js 甚至 Bootstrap。...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...lint (l): 在给定项目文件夹中的 Angular 应用程序代码上运行 linting 工具。 new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。...结论 在本教程中，我们了解了如何在 Windows 计算机上安装 Angular CLI，并使用它从头开始初始化一个新的 Angular 项目。
由于Webpack将所有JavaScript源代码捆绑到一个 dist / index.html 文件中链接的 bundle.js 文件中，因此从 本质上讲 ，您只需要Web服务器上的这两个文件即可向任何人显示...一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...最终，您的Webpack构建管道将变得更加复杂，并且最终在 dist / 文件夹中包含两个以上的文件。突然，文件夹变得一团糟，因为您不知道哪些文件属于最新版本。...还要注意，有一个名为 _dist / bundle.js.map 的新文件，该文件用于执行 _src /中的 实际源代码和 dist / bundle.js中 的捆绑JavaScript的 映射 。...然后，检查您的 dist / 文件夹中是否有新文件。
由于Webpack将所有JavaScript源代码捆绑到一个 dist / index.html 文件中链接的 bundle.js 文件中，因此从 本质上讲 ，您只需要Web服务器上的这两个文件即可向任何人显示...一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...这意味着我们可以在每个Webpack版本中删除 dist / 文件夹中的内容。...还要注意，有一个名为 dist / bundle.js.map 的新文件，该文件用于执行 src /中的 实际源代码和 dist / bundle.js中 的捆绑JavaScript的 映射 。...然后，检查您的 dist / 文件夹中是否有新文件。
结合 watch 使用时，当 src 中的文件变化时，会使用新的文件运行任务，如： js: { files: [ '/scripts/{,*/}*.js'...*/}* ，但保留 /.git* 文件或者文件夹。...压缩 下的所有 html 以及视图文件夹所有的 html，将压缩后的文件置于 / 下。...clean:dist 清除 .tmp 和 /{,*/}* ，但保留 /.git* 文件或者文件夹。... 下的所有 html 以及视图文件夹所有的 html，将压缩后的文件置于 / 下。
在如何在 ASP.NET MVC 中集成 AngularJS(1)中，我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。...捆绑可以很容易地将多个文件合并或捆绑到一个文件中。您可以创建 CSS，JavaScript 和其他包。压缩可以优化脚本和 CSS 代码，如去除不必要的空格和注释，缩短变量名到一个字符。...我为工程中的每一个文件设置了一个独立的捆绑，包括对脚本的单独捆绑，Angular 的核心文件，共享的 JavaScript 文件和主目录单，客户目录和产品目录。...在这种模式下，应用的版本序列号会被追加到捆绑中的所有JavaScript 文件的脚本标签中。对于标准的渲染脚本标签格式不包含追加版本号来说，这也算是个小弥补。...在这第二部分讲解中，作者解决了如何在 ASP.NET MVC 中集成 AngularJS 遇到的大部分问题。
在本教程中，您将学习如何在Ubuntu 14.04服务器上安装和使用Bower。.../bootstrap目录中安装了Bootstrap，其中包含缩小版本（我们将使用）的路径：bower_components/bootstrap/dist/js/bootstrap.min.js是对于JavaScript...文件的，bower_components/bootstrap/dist/css/bootstrap.min.css是对于CSS文件的。...第6步 - 创建Hello World应用程序 在/usr/share/nginx/html/文件夹编辑中，让我们用我们自己的内容替换默认index.html文件： mv /usr/share/nginx...Bower允许您使用此文件配置许多选项，您可以从官方文档中的配置选项中了解更多信息。 一个有用的选项是该directory选项，它允许您自定义Bower保存其所有包的文件夹。
它是如何在Angular 2中工作的？ Angular 2不具有双向digest cycle，这是与Angular 1不同的。...如何在Angular 2中启用延迟加载？ 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载，会在初始调用时，产生巨大的性能开销。...如果我们需要扩展外部库的类型定义，一个好的做法是，我们并非对node_modules或现有的typings文件夹进行改动，而是创建一个命名为“自定义类型”的新文件夹，来存储所有的自定义类型。...要定义应用程序（JavaScript / Typescript）对象的类型，我们应该在应用程序相应模块的models文件夹中，定义接口和实体类。...缺点： 仅适用于HTML和CSS，其它文件类型需要前面的构建步骤 没有watch模式，必须手动完成（bin / ngc-watch.js）并编译所有文件 需要维护AOT版本的bootstrap文件（使用
除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。...在 src/ 文件夹里面，app/ 文件夹中包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。...--project getting-started 备注：这一步通过NPM安装包，在Angular >= 7 and CLI >= 7版本中，让您的项目使用自定义生成器的更新您的angular.jsonng...}), 复制代码 模块功能：能够查看到你的文件打包压缩后中真正的内容，找出那些模块组成最大的大小，找到错误的模块，优化它！最好的事情是它支持缩小捆绑！它解析它们以获得实际大小的捆绑模块。...dist/index.html： <!
对文件进行压缩， 5.最后输出到当前目录下，build文件夹中。...gulp打包 因为项目中使用bower进行类库的管理，所以在项目打包的过程，需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。...在gulpfile.js中有一个task名为vendor，主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。.../dist/js/bootstrap.min.js', 'app/assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js.../echarts/dist/echarts.min.js', 'app/assets/bower_components/angular-tour/dist/angular-tour-tpls.js
幸运的是，捆绑和压缩是 ASP.NET 4.5 ASP.NET 中的一项功能，可以很容易地将多个文件合并或捆绑到一个文件中。你可以创建 CSS，JavaScript 和其他包。...; 所有的 JavaScript 文件驻留在脚本文件夹; 所有的内容文件驻留在内容文件夹中。...对于示例应用程序，我在视图文件夹下创建了两个额外的文件夹，一个客户的子文件夹，一个产品的子文件夹。...所有的客户的 Angular 视图和控件器将驻留在客户子文件夹中，所有的产品的 Angular 视图和控件器将驻留在产品子文件夹中 。...由于 Angular 视图是 HTML 文件，而 Angular 控制器是 JavaScript 文件，从 Views 文件夹到浏览器，ASP.NET MVC 必须被配置为允许 HTML 文件和 JavaScript
初始化 angular6-example-app 克隆 angular6-example-app $ git clone https://github.com/Ismaestro/angular6-example-app.git...--prod --stats-json 当项目构建完成后，在根目录下的 dist 文件夹下会生成一个 stats.json 文件，然后我们可以通过以下的命令来查看 webpack 打包文件大小信息：...文件夹下会生成 main bundle 文件，这时我们可以在命令行执行下列命令来查看结果： $ node_modules/.bin/source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js...成功执行上述命令后，在浏览器中你将会看到以下内容： ?.../main.d72e9d91fd17f9fe7b8c.js" 其实除了本文介绍的两个插件之外，还有其它的第三方工具，也提供了分析 bundle 包大小的功能，比如 webpack-visualizer
在前一部分中，我讨论了转向MFE解决方案的动机以及解决方案相关的一些标准。在这一部分中，我将介绍我们如何在Outbrain实现它。...Webpack入口点，我们可以将整个Angular模块(包括css和html)打包为一个单独的js文件。.../app/appB.prod.module.ts' } 使用Angular的延迟加载机制，我们可以动态加载这个js文件并引导到当前的应用程序中。...share -loader允许我们指定希望在应用程序之间共享的模块列表，它将一个给定的模块捆绑到一个应用程序js捆绑包中，并提供一个其他捆绑包访问该模块的名称空间。...在运行时，当一个小型应用程序加载到容器应用程序中时，将调用端点并将js文件加载到应用程序并引导到主应用程序。这样，每个应用程序都可以单独构建部署。
支持现代框架：React，Angular，AngularJS，Vue.js，Express等。 用于客户端代码和Node.js的内置调试器。...安装和设置WebStorm JRE 1.8与WebStorm发行版捆绑在一起。您无需在计算机上安装Java即可运行WebStorm。...ws_getting_started_create_new_file.png 要查看文件或文件夹，请选择VCS | 当地历史| 在主菜单上显示历史记录。...npm app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。...默认使用babel编译 默认开启使用了一些新的特性如promise，async/await等等。
快速构建：对于开发来说，你不需要再等待再每次更改之后，webpack去重新解析第三方代码，因为第三方类库将会独立到另外的一个bundle中，另外，超快速的构建包含了所有的map文件便于调试，再发布版本的文件中却将直接输出压缩版本...，再发布过程中，这些工作将自动完成。...服务器端预加载的意义何在？ 意义并不在于让支持哪些不运行javascript的浏览器，它只是一种极端情况而已（如果为了这种极端情况，那还为什么要建立一个SPA应用呢？）...如果你的项目运行在VS默认开发模式下，webpack会在后台监控你每一个到http://yoursite/dist的请求，它处理每一个请求并且返回一个编译过的代码文件。...模块热拔插（HMR）解决了这个问题，在默认的开发模式下，它会监测对于angular项目文件的任何改变（Typescript,css,html），当改变发生，它会自动触发一次快速的编译，并且托送所有改变的文件到活动的浏览器窗口
编译后的输出目录，默认是dist/ "assets": [ // 记录资源文件夹，构建时复制到`outDir`指定的目录 "assets", "favicon.ico.../karma.conf.js" } }, "defaults": { // 执行`ng generate`命令时的一些默认值 "styleExt": "scss", // 默认生成的样式文件后缀名..."component": { "flat": false, // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹） "spec": true, /...下面两条等价： ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价： ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件： "environments
ASP.NET Core 中的捆绑和缩小静态资产 2020/09/02 作者：Scott Addie 和 David Pine 本文介绍应用捆绑和缩小的好处，包括如何在 ASP.NET Core Web...在这种情况下，即使在第一个页面请求后，捆绑和缩小仍能提高性能。 捆绑 捆绑将多个文件合并到单个文件中。 捆绑可减少呈现 Web 资产（如网页）所需的服务器请求数。...缩小 缩小在不更改功能的情况下从代码中删除不必要的字符。 因此，请求的资产（如 CSS、图像和 JavaScript 文件）的大小大幅减小。...操作 使用捆绑/缩小 不使用捆绑/缩小 更改 文件请求 7 18 157% 传输的 KB 156 264.68 70% 加载时间（毫秒） 885 2360 167% 对于 HTTP 请求标头，浏览器非常详细...在前面的示例中，为自定义 JavaScript (wwwroot/js/site.js) 和样式表 (wwwroot/css/site.css) 文件定义了单一捆绑配置 。
在AngularJS7中使用JQuery.js/Bootstrap等第三方功能库 这几个包是在使用传统html页面的时候常用的，JQuery.js在很多的框架中已经不建议使用了，而是使用框架的组件或组件通讯类功能来完成相似的功能.../dist/js/bootstrap-switch.js"] 需要注意，如果是AngularJS4, 文件名应当是.angular.json，scripts数组中添加的路径，应当是...../dist/css/bootstrap3/bootstrap-switch.css"; 做完第三步，css可以立即生效，js文件则仍然需要在AngularJS主程序中引用，比如： ... import...的路径，路径实际是由angular.json文件中我们刚才修改的scripts一节决定的。.../some_angular_dir/jslib 这会编译jslib中的所有文件，文件夹结构也会保留，所以编译完成，直接用生成的jslib替换原来的文件夹。
/main.d72e9d91fd17f9fe7b8c.js （示例来源 —— Angular 工具篇之分析包的大小) 然而，如果使用 npx 的话，我们就可以简化上述的命令，如： $ npx source-map-explorer...dist/main.d72e9d91fd17f9fe7b8c.js 上述的命令，将会运行本地项目中安装的 source-map-explorer 这个库。...一次性执行外部库 对于不经常使用的全局二进制文件，你可以不在本机上进行全局安装，而是在需要时使用 npx 即时下载并执行二进制文件。.../dist/main.js angular-cli-ghpages 在使用 angular-cli-ghpages 前，请确保本地已经安装了 Node.js 及 Angular CLI。...文件中找到。
开发阶段的镜像中包含所有东西，产品阶段的镜像中只包含运行所需的必要内容。 可以使用一个脚本文件 dockerbuild.sh，先构建开发阶段的版本，然后拷贝出必要的层/文件，再构建出产品版本的镜像。.../WebApp/dist # RUN npm install for node js dependencies RUN npm install # copy index.js file COPY index.js...EXPOSE 3070 ENTRYPOINT ["node"] CMD ["index.js"] 构建结果： 可以看到，大小与 builder pattern 是一样的。 7....Multi-stage 优势 builder pattern 中我们需要维护 2 个Dockerfile 文件和一个 shell 脚本文件，而 multi-stage 中，在一个 Dockerfile...builder pattern 中，我们需要自己把必须的文件捣腾到本地文件夹，而 multi-stage 中，可以使用 --from 把文件从一个阶段复制到另一个阶段。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
