javascript - Angular CLI 如何为每个组件生成和引用 JS 文件

标签 javascript angular angular-cli

我是 Angular 新手。我正在使用 Angular CLI 创建项目和组件。我知道如何创建项目并使用 CLI 运行它。我仍在尝试了解 Angular 的基础知识。 有人可以帮助我理解以下内容,

1) 组件是不同的文件。 Webpack 是否通过捆绑所有 ts 文件来生成单个文件?如果是这样,模块导入机制如何工作?我们使用文件路径导入模块。

2)这些生成的js文件如何在html文件中引用?当我打开 index.html 文件时,我只看到对 inline.bundle.js、polyfills.bundle.js、styles.bundle.js、vendor.bundle.js 和 main.bundle.js 的引用。这些文件是什么?

提前致谢。

更新

这是我到目前为止所学到的。

  • Angular CLI 配置文件是 .angular-cli.json

  • Angular 使用 tsc(Typescript Compiler)将 EC6 转译为 EC5。配置文件是 tsconfig.json

  • Angular 使用 Webpack 捆绑 js 和 css 文件来组合并交付给浏览器。默认情况下,Angular CLI 管理底层 webpack 配置。 webpack.config.js 是配置文件。可以使用“ngject”命令导出该文件。

  • Angular 在编译代码时使用 CommonJS 作为模块目标。 CommonJS + Webpack 将 Typescript 的 Native EC6 模块转换为支持浏览器的单文件(main.boundle.js)模块系统。

@LorenzoImperatrice 回答了我的第二个问题。 :)

最佳答案

1) 是的,AngularCLI(使用 Webpack)会生成一个文件,其中包含每个组件中的所有代码,您可以通过运行 ng build 来查看此文件>,这将在你的根文件夹中创建一个名为“dist”的目录,此时只需搜索 main.bundle.js 即可看到生成的代码。应用程序的编译器选项位于文件“tsconfig.app.json”和“tsconfig.json”中。大多数时候您根本不想修改这些文件。

2) 正如我在第 1 点中所说,生成一个包含所有内容的唯一文件 (main.boundle.js)。

  • inline.bundle.js:它是 Webpack 加载器广告,用于引导 Webpack 并加载其他文件
  • polyfills.bundle.js:用于支持不同浏览器,基于文件“polyfills.ts”创建。
  • styles.bundle.js:用于在应用程序中注入(inject)您需要的通用样式,可以自定义从文件“.angular-cli.json”注入(inject)的内容<
  • vendor.bundle.js:与“styles.bundle.js”相同,但使用 js 脚本

关于javascript - Angular CLI 如何为每个组件生成和引用 JS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48907353/

相关文章:

javascript - HTML5视频截图

javascript - 使用 Nodejs 的多个用户输入

javascript - 添加到 WordPress header 时脚本损坏

html - 如果在 Angular 中将 sourcemap 设置为 false 会发生什么

Angular 2 和 Typescript - 从单个文件导入多个接口(interface)

javascript - 我的 javascript 循环在完成所有 if else 语句之前中断

javascript - 类型错误 : Cannot read property 'properties' of undefined - @ng-toolkit/universal

javascript - 下拉 HTML 表格

angular - 验证复选框列表 Angular 2

angularjs - 使用 Angular CLI 的 Web 应用程序不显示 bootstrap-sass 字形