第一篇文章是: "使用angular cli生成angular5項(xiàng)目" :http://www.dbjr.com.cn/article/136621.htm

第二篇文章是: "使用angular cli從藍(lán)本生成代碼" :http://www.dbjr.com.cn/article/137031.htm

第三篇文章是: "使用Angular CLI生成路由" :http://www.dbjr.com.cn/article/137033.htm

Build.

Build主要會(huì)做以下動(dòng)作:

1. 編譯項(xiàng)目文件并輸出到某個(gè)目錄
2. Build targets決定了輸出的結(jié)果
3. bundling 打包
4. 生產(chǎn)環(huán)境的build還會(huì)進(jìn)行uglify和tree-shaking(把沒用的代碼去掉)

ng build.

可以先看幫助:

ng build --help

針對(duì)開發(fā)環(huán)境, 就是用命令 ng build.

默認(rèn)情況下, 它的輸出目錄在.angular-cli.json文件里ourDir屬性配置的, 默認(rèn)是/dist目錄.

build之后會(huì)看見dist里面有這些文件:

1. inline.bundle.js 這是webpack的運(yùn)行時(shí).
2. main.bundle.js 就是程序代碼.
3. pollyfills.bundle.js 就是瀏覽器的Pollyfills.
4. styles.bundle.js 樣式
5. vendor.bundle.js 是angular和第三方庫(kù)

可以使用source-map-explorer來(lái)分析依賴, 并且查看哪些模塊和類在bundle里面.

首先修改上一個(gè)例子中的代碼:

執(zhí)行ng build:

可以看到生成了這些文件.

把dist里面的index.html格式化一下看看:

可以看到它引用了生成的5個(gè)js文件.

打開main.bundle.js可以看到我寫的代碼:

下面運(yùn)行程序: ng serve -o:

可以看到在ng serve的時(shí)候, 加載了上述的文件.

因?yàn)閚g build是開發(fā)時(shí)的build, 所以沒有做任何優(yōu)化, 文件挺大的.

這時(shí)看一下文件目錄, 并沒有dist目錄:

那么這些文件是怎么被serve的呢?

這是因?yàn)? 這時(shí)候webpack是在內(nèi)存中進(jìn)行的serve.

下面使用source-map-explorer進(jìn)行分析, 首先安裝它:

npm install --save-dev source-map-explorer

然后執(zhí)行 ng build, 再執(zhí)行:

.\node_modules\.bin\source-map-explorer dist\main.bundle.js

結(jié)果會(huì)生成這個(gè)圖形:

再看看vendor.bundle的情況:

.\node_modules\.bin\source-map-explorer dist\vendor.bundle.js

這里面東西就比較多了.

Build Targets和Environment.

Environment是指采用哪一個(gè)環(huán)境文件:

而Targets則是用來(lái)決定項(xiàng)目文件是如何被優(yōu)化的.

看一下開發(fā)和生產(chǎn)build的對(duì)比.

下面命令都是針對(duì)開發(fā)時(shí)的build, 它們的作用是一樣的:

ng build
ng build --dev
ng build --dev -e=dev
ng build --target=development --environment=dev

下面則是生產(chǎn)build:

ng build --prod
ng build --prod -e=prod
ng build --target=production --environment=prod

其它常用的參數(shù)還有:

1. --sourcemap -sm 生成source map
2. --aot Ahead of Time編譯
3. --watch -w Watch并rebuild
4. --environment -e Build環(huán)境
5. --target -t Build target
6. --dev 表示dev env和target
7. --prod 表示prod env和target

Production Build.

先使用--aot:

ng build --aot

使用aot之后可以看到 vendor.bundle的大小降了很多, 只有1.5m左右了.

執(zhí)行aot會(huì)去掉一些程序執(zhí)行不需要的代碼, 例如angular的compiler這時(shí)就不在build輸出的文件里了(可以使用source-map-explorer查看).

試試生產(chǎn)環(huán)境:

ng build --prod

可以看到所有的文件都非常小了, 并且沒有vendor了(因?yàn)閜rod下--build-optimizer起作用所以vendor沒有了, 但可以使用--vendor-chunk true給弄出來(lái)).

Serve.

ng serve. 已經(jīng)一直在用了, 下面看看它常用的參數(shù):

1. --open -o 打開默認(rèn)瀏覽器
2. --port -p 端口
3. --live-reload -lr 發(fā)生變化時(shí)重新加載網(wǎng)頁(yè)(默認(rèn)開啟的)
4. --ssl 使用https
5. --proxy-config -pc 代理配置
6. --prod 在內(nèi)存中serve 生產(chǎn)模式build的文件

試試 --prod:

ng serve --prod

通過文件大小可以看出確實(shí)是prod build的.

ng eject.

為項(xiàng)目生成webpack配置和腳本.

執(zhí)行該命令試試:

看看有哪些變化:

.angular-cli.json:

package.json:

命令腳本都變了

還多出來(lái)一個(gè)webpack.config.js文件:

為什么要這么做呢?

可以對(duì)項(xiàng)目更深入的配置....

這時(shí)運(yùn)行程序就是 npm start了.

我還是把reject恢復(fù)回去吧, 使用git來(lái)恢復(fù)吧.

如果需要Serve 其他js/css/assets文件:

放在.angular-cli.json就行, 例如jquery就應(yīng)該放在scripts里面.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論