Angualr 9- ng build --prod创建了多个es5和es2015 js文件

Angular 9是一种流行的前端开发框架，它使用TypeScript编写，并提供了丰富的工具和功能来构建现代化的Web应用程序。ng build --prod是Angular CLI的一个命令，用于将Angular应用程序编译为生产环境所需的静态文件。

在执行ng build --prod命令后，Angular 9会根据项目配置和构建选项创建多个ES5和ES2015 JavaScript文件。这些文件是为了兼容不同的浏览器和JavaScript引擎而生成的。

ES5和ES2015是ECMAScript（JavaScript的标准化版本）的不同版本。ES5是较旧的版本，兼容性更广，适用于大多数现代浏览器。ES2015是较新的版本，引入了许多新的语言特性和功能，但在一些旧版本的浏览器中可能不被完全支持。

创建多个ES5和ES2015 JavaScript文件的目的是为了实现浏览器的兼容性，并根据浏览器的支持情况加载相应的文件。这样可以确保应用程序在不同的浏览器中都能正常运行。

对于Angular应用程序，使用ng build --prod命令创建多个ES5和ES2015 JavaScript文件的优势包括：

兼容性：通过生成不同版本的JavaScript文件，可以确保应用程序在各种浏览器和JavaScript引擎中都能正常运行。
性能优化：根据浏览器的支持情况加载相应的JavaScript文件，可以减少不必要的代码和功能加载，提高应用程序的性能。
代码分割：Angular的构建工具会自动将应用程序代码分割成多个模块，以便按需加载，减少初始加载时间和资源消耗。
体积优化：生成的ES5和ES2015 JavaScript文件经过压缩和优化，可以减小文件大小，提高应用程序的加载速度。

对于使用Angular 9进行开发的应用程序，推荐的腾讯云相关产品是腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）是一种可扩展的云计算服务，提供高性能的虚拟机实例，适用于各种应用程序的部署和运行。

腾讯云对象存储（COS）是一种安全可靠的云存储服务，适用于存储和管理大量的静态文件，如图片、视频、文档等。

以下是腾讯云相关产品的介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular实战项目（1）

，设计模式和最佳实践任务的分组，项目的分配，任务的状态跟踪 ?...image.png 环境搭建安装node node --version node -> npm -> angular CLI 安装node.js的目的是使用npm管理项目依赖的软件包由于网络环境原因...image.png 使用angular cli使我们无需理会复杂的配置，更加专注Angualr。...ng build -prod 生成环境编译不建议使用ng build ng serve 启动开发服务器 Mock Rest API json-server:用于快速搭建REST API的利器安装...image.png JSON文件相当于数据库使用VSCode的REST Client插件 ?

1.8K1 0

使用typescript开发angular模块(发布npm包)

创建模块初始化package.json文件执行命名 npm init -y 会自动生成package.json文件如下，name默认为文件夹名称 { "name": "MZC-Ng-Api",.../* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or...编译成功会生成了js文件 ? image.png 发布虽然什么都没有，但是什么都有了。...image.png 关于tsconfig.json的更多配置可以好好研究研究指定发布文件修改 { "name": "mzc-ng-api", "version": "1.0.2",...可以根据自己需求编写更多快捷脚本 "scripts": { "build": "tsc -p .

1.2K2 1

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。...我们假设取名index.js，放在项目根目录的src文件夹里。...：单独编译某个文件 build-d：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建） build-o：把一个文件夹内的指定文件编译到另外的文件夹里（文件夹需要自己创建...{ “build-t”:“babel index.js --presets es2015”, “build-d”: “babel src -d lib --presets es2015”, “build-o...”:“babel src/index.js -o dist/index.js --presets es2015” }, “keywords”: [], “author”: “”, “license”:

2371 0

Angular2入门体验

angualr cli就是一个支持创建工程，添加文件，对各种任务如测试、打包、部署等迭代。...第三步，启动应用在项目目录，执行命令： cd my-app ng serve --open ng serve会启动服务器，监控文件，当修改的时候重启应用。...使用--open 选项会自动开启浏览器并访问http://localhost:4200 可以看到下面的信息：第四步，编辑angular组件 cli创建了angualr组件，应用组件被命名为app=root...CLI会自动添加js和css资源 main.ts 应用的主要入口，基于JIT编译应用，并在浏览器中运行。...编辑器配置 .gitignore git忽略的文件 karma.conf.js karma test 单元测试 package.json npm管理的第三方组件 protractor.conf.js

1.6K6 0

用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

标准的浏览器（不支持 IE8 及以下版本）下面提供官网的打包模型 3.支持ES6+JQuery+Less/Scss的单页/多页脚手架在实现脚手架之前，假设我们已经创建了目录和package.json...，开发环境配置文件webpack.dev.js以及生产环境配置文件webpack.prod.js。.../build/webpack.prod.js" } 复制代码 webpack默认会找名为webpack.config.js的文件，由于我们将其拆解为prod和dev，所以我们要手动指定webpack...它依赖于 ES2015 模块语法的静态结构特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。...此时执行npm run build,我们可以看到代码已经进行了分割：当然只满足与css和js的打包还远远不够，我们项目中还会用到各种图片，字体图标，css预编译语言如less或者scss，由于这部分的安装比较简单

2.3K2 1

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。...： build-t ：单独编译某个文件 build-d：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建） build-o：把一个文件夹内的指定文件编译到另外的文件夹里（...", "scripts": { "build-t":"babel index.js --presets es2015", "build-d": "babel src -d lib -...-presets es2015", "build-o":"babel src/index.js -o dist/index.js --presets es2015" }, "keywords...es5文件。

2381 0

为生产环境编译 Angular 2 应用

打包与压缩传统的方式无非就是进行打包和压缩，我使用 browserify 和 uglifyjs 来进行打包与压缩，首先是安装这两个工具类库： npm i -D browserify uglifyjs...的配置文件，内容如下： { "compilerOptions": { "target": "es2015", "module": "es2015", "moduleResolution...来忽略这些文件，避免对代码库造成污染；将 typescript 文件编译成 es2015 (es6) 脚本； npm run tsc -- -p tsconfig-es2015.json...dist/bundle-aot.js --screw-ie8 --compress --mangle --output dist/bundle-aot.min.js", "prod-aot":...&& npm run minify-aot" } } 最终只要运行一个命令即可： npm run prod-aot 最后来看一下最终的文件大小： ls -hl -rw-r--r-- 1 zhang

1.2K3 0

如何使用 babel

Babel 用于将 ES6 的代码转化为 ES5，使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。...babel-cli 在 node 和 npm 环境安装好的前提下，安装 babel，如下： npm install --global babel-cli 安装完成后就可以编译文件了。...babel main.js 编译后的文件显示在终端上，可以添加其他命令让它输出到指定文件下： babel example.js --out-file compiled.js 或 babel example.js...然后输入以下内容作为开始： { "presets": [], "plugins": [] } 为了让 babel 将 ES2015 转化为 ES5，我们要安装如下： npm install...默认对于 ES2015 的代码可能会报错或者警告，看着可能会不爽。我们可以在配置文件中将它设置为允许 ES2015 的模式。在项目根目录下创建文件.jshintrc。

2.2K1 0

使用Angular CLI进行Build (构建) 和 Serve

执行ng build: ? ? 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: ? 可以看到它引用了生成的5个js文件....ng build ng build --prod Environment environment.ts environment..prod.ts 缓存只缓存css里引用的图片所有build的文件 source...-e Build环境 --target -t Build target --dev 表示dev env和target --prod 表示prod env和target Production Build...在内存中serve 生产模式build的文件试试 --prod: ng serve --prod ?...通过文件大小可以看出确实是prod build的. ng eject. 为项目生成webpack配置和脚本. 执行该命令试试: ? 看看有哪些变化: .angular-cli.json: ?

2.3K7 0

webpack5打包一个TS 库并发布到npm 一条龙实战教程（附模板代码）

新建项目 package.json 安装webpack 和 webpack-cli webpack-cli init 选择配置 webpack5 资源打包默认方案 ts 声明文件没有产生处理发布包到npm...是否要简化捆绑包HTML文件的创建？ HtmlWebpackPlugin会把打包好的js文件，自动绑到html 文件，交给wepack 配置。..."build:prod": "webpack --mode=production --node-env=production", "watch": "webpack --watch",..."serve": "webpack serve" } yarn build 编译完之后发现没有ts声明文件配置tsconfig 生成声明文件我们需要声明文件，到dist 一起发版，..."build:prod": "webpack --mode=production --node-env=production", "watch": "webpack --watch",

2.2K3 0

Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

= config; 配置babel的配置文件，在.babelrc文件中写入以下内容： { "presets": [ "es2015", "react" ] } 此时我们测试一下是否可以正常编译...jsx和es2015，安装react和react-dom，同时在src中的main.js和App.js写入部分内容 npm i react react-dom -S main.js import ReactDOM...build即可自动生成用于生产环境的文件。...使用clean-webpack-plugin 现在还有一个问题是我们修改文件之后再次使用npm run build命令则会出现多个js文件，这是因为我们使用了hash占位符，这个占位符可以保证用户访问网站时始终保持最新的...js文件，因此我们使用clean-webpack-plugin帮助我们每次删除dist文件夹的内容 npm i clean-webpack-plugin -D 在webpack.prod.js中引用：

1.9K3 0

Angular CLI 简介

ng build ng build --prod Environment environment.ts environment..prod.ts 缓存只缓存css里引用的图片所有build的文件 source...=dev 下面则是生产build: ng build --prod ng build --prod -e=prod ng build --target=production --environment=...-e Build环境 --target -t Build target --dev 表示dev env和target --prod 表示prod env和target Production Build...试试生产环境: ng build --prod 可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk...在内存中serve 生产模式build的文件试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod build的. ng eject.

6K11 0

Babel 入门指南

# 将结果写入到指定的文件 $ babel example.js --out-file compiled.js $ babel example.js -o compiled.js # 将一个目录整个编译成一个新的目录..." }, } 现在可以在终端里执行命令： $ npm run build ?...语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法 test: /\.jsx?...$ npm run prod # 清除输出目录 dist $ npm run clean 配置 Babel ?...Babel 插件大致分为三类：转码插件有很多种插件：将ES6 / ES2015转换为ES5，转换为ES3，minification，JSX，flow，实验功能等等。

1.5K5 0

一些你需要掌握的 tsconfig.json 常用配置项

项目中如果有多个相互独立的模块，可以使用这个属性来做分离。这样一个模块改变后，就只重新编译这个模块，其他模块不重新编译。编译时要改用 tsc --build。这在非常大的项目中应该能有不小收益。...lib 有高层级的：ES5、ES2015、DOM 、ESNEXT、WebWorker、ScriptHost 等。...高层级通常是多个全局类型声明的组合。...declarationDir 指定编译生成的类型声明文件输出的目录。不提供的话，默认和生成的 js 文件放在一起。 "declarationDir": "..../app.js" module 编译后的 JS 使用哪种模块系统。模块系统常用的有两种：ESModule 和 CommonJS。

1.5K1 0

【One by one系列】一步步学习TypeScript

tsconfig.json文件中指定了用来编译项目的根文件和编译参数选项。...【ps】只有 "AMD"和 "System"能和 --outFile一起使用。【ps】"ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。.../built/local/tsc.js",//将输出文件合并为一个文件。合并的顺序是根据传入编译器的文件顺序和 ///和 import的文件顺序决定的。..."files"指定一个包含相对或绝对文件路径的列表。"include"和"exclude"属性指定一个文件glob匹配模式列表。..."build":"tsc -p ."

5972 0

vue2.x 做一个音乐app

for production with minification npm run build # build for production and view the bundle analyzer...report npm run build --report # run local server npm run prod.server.js Tip # 如果 npm install 长时间没有反应或者安装失败...修改代码之后网页无刷新改变，对前端开发来说非常的方便 Postcss，再也不用去管兼容性的问题了，只针对 chrome 写 css 代码，会自动编译生成支持多款浏览器的 css 代码 ESlint，统一代码风格 bable，ES2015...有了 bable，放心使用 ES6 语法，它会自动转义成 ES5 语法 Stylus，类似于 sass/scss ，但是可以不写 { } 和 :，使用起来还是很方便的 better-scroll，很好用的移动端各种滚动场景需求的插件...（已支持PC） vuex，Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 vue-router，专为 Vue.js 应用程序开发的路由工具除此之外，vue-cli 已经使用 node 配置了一套本地服务器和安装命令等

5752 0

Webpack5 开箱体验~欢迎品鉴

此版本重点关注以下内容: Commonjs 的 TreeShaking,更好的 TreeShaking 可以生成 ES5 和 ES6 / ES2015 代码通过持久缓存提高构建性能使用更好的算法和默认值来改善长期缓存.../src/index.js', output: { filename: '[name].js', path: resolve(__dirname, 'build') }, mode...webpack 现在能够多个模块之前的关系 import { something } from '....output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码....此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。

6311 0

搭建babel将es6转es5环境

"default",function(){ return gulp.src("js/a.js").pipe(babel({ presets: ['es2015'] }))....pipe(gulp.dest("lib")); }) 当我们在当前项目目录下运行 gulp 命令后，会发现原本在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js...可能报错和原因 ? package.json文件不应该是空的。如果你有空的包json文件，只需添加{}。然后再试一次就行。 ** Demo：2.不使用工具你得有.babelrc文件。...Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。...-d lib 之后，你会看到js文件夹下的.js文件，全部转码到lib文件夹下，检查一下lib文件夹中的.js是否已经变为es5了。

6151 0

前端工程化篇之 Gulp

// 只要放入口文件 return gulp.src('build/js/app.js') .pipe(browserify()) // 重命名文件 .pipe(rename...gulp.series('js-dev')); }); // 配置默认任务 --> 执行以上多个任务 gulp.task('js-dev', gulp.series('eslint', 'babel'..., 'browserify')); // 同步顺序执行，同一时间只能执行一个任务速度慢 gulp.task('js-prod', gulp.series('js-dev', 'uglify'));...('build', gulp.parallel('js-dev', 'less')); // 生产环境的指令: gulp prod gulp.task('prod', gulp.parallel('js-prod...gulp工程化所需要的包的使用方法和注释，喜欢的朋友希望你收藏！

1.3K1 0

rollup打包入门到实践

bundle.iife文件，iife模式 npx rollup index.js --file bundle-iife.js --format iife // 将index.js打包输出成cjs模式...); } getName(); 命令行可以输出对应文件，我们也可以用配置文件方式，因此你可以像webpack一样新建一个rollup.config.js这样的配置，内容也非常简单 export default..."build": "rollup -c rollup.config.js" }, Warning: To load an ES module, set "type": "module" in...es6转换成es5 在上面的例子中我们代码里有使用es6,但是打包后仍未转译，es6转es5主要依赖以下几个关键插件rollup-plugin-babel,@babel/preset-env,@babel...时测试打包后的js 我们新建了一个example文件，在该目录下新建一个index.html <!

1.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Angualr 9- ng build --prod创建了多个es5和es2015 js文件

相关·内容

Angular实战项目（1）

使用typescript开发angular模块(发布npm包)

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

Angular2入门体验

用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

为生产环境编译 Angular 2 应用

如何使用 babel

使用Angular CLI进行Build (构建) 和 Serve

webpack5打包一个TS 库并发布到npm 一条龙实战教程（附模板代码）

Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

Angular CLI 简介

Babel 入门指南

一些你需要掌握的 tsconfig.json 常用配置项

【One by one系列】一步步学习TypeScript

vue2.x 做一个音乐app

Webpack5 开箱体验~欢迎品鉴

搭建babel将es6转es5环境

前端工程化篇之 Gulp

rollup打包入门到实践

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐