我是 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/