[angular 12] dotnet new 預設樣板與 ng new 預設樣板差異 - package.json 差異 dependencies 區段

 

dependancies 區段主要差異是 angular、typescript 相關套件的升級

typescript：3.5.3 => 4.2.3

angular：.8.2 => 12.0.3

rxjs：6.6.3 => 6.6.0 (反而降了)

zone.js：0.9.1 => 0.11.4 

其他比較次要一點的套件：

dotnet new 樣板預設使用的 bootstrap 相關的套件

bootstrap、jquery、popper 這些自然是沒有的

core-js 是 polyfill 用的函式庫，照理說已經在 tsconfig、angular cli (參考)裡面涵蓋了

為什麼要使用我也不太確定，可能是用來支援其他的前端函式庫?

node-sass 是用來讓 nodejs 接上 LibSass，LibSass已經只做維護更新(參考)

oidc-client 是用來做 open id client 端

protractor 是 end-to-end 測試用的函式庫

 

devDependancies 區段的差異也是 angular、typescript 加上測試用套件的升級

angular 部分主要差異是 language-service 我覺得可以加上去

測試用套件

    karma：5.2.3 => 6.3

    jasmine：3.5 => 3.7

lint 用套件

    codelyzer 是用來做程式碼掃描用的

其他

    ini 是用來做 ini 檔案格式解析用的

optionalDependencies 區段是用來說這些套件是 optional 的，安裝的時候找不到這些套件也沒有關係 node-sass、protractor、ts-node、tslint

[angular 12] dotnet new 預設樣板與 ng new 預設樣板差異 - package.json 差異 script 區段

scripts區塊

先從不同的地方說起

build:ssr：設定了 server side render 的設定，是透過 angular.json 的 architect (建築目標) 設定

lint：透過 ng 做程式碼驗證

e2e：目前還沒用過，是用來做 end to end 整合測試的功能

watch：在 build 完之後，會持續監控內容修改，遇到修改就進行重新編譯

angular.json 裡的 archtect 段落(參考)會為 ng xxxx 設定預設值

ex. ng build, ng serve, ng test 等

而 dotnet new 裡面的 build:ssr 也是類似

[TypeScript] tsconfig.json

使用 typescript 的時候會有不少設定值可以設定，
typescript compiler (tsc) 有可以產生預設值

tsc -init

view raw blog-tsconfig-001.sh hosted with ❤ by GitHub

產生出來的 tsconfig.json 內容有一些預設值跟已經被註解的範本

	{
	"compilerOptions": {
	/* Basic Options */
	"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
	"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
	// "lib": [], /* Specify library files to be included in the compilation. */
	/* Strict Type-Checking Options */
	"strict": true, /* Enable all strict type-checking options. */
	/* Module Resolution Options */
	"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
	/* Advanced Options */
	"skipLibCheck": true, /* Skip type checking of declaration files. */
	"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
	}
	}

view raw blog-tsconfig-002.json hosted with ❤ by GitHub

target：編譯產生的 ECMAScript 版本
module：編譯產生出的模組引用方式
strict：型別檢查
lib：預設載入 js 函式庫

    dom：瀏覽器 DOM 物件存取相關的 API - window, document, etc.
    es2015：包含 ES2015 相關的 API -  array.find, Promise, Proxy, Symbol, Map, Set, Reflect, etc.
    es2016：包含 ES2016 相關的 API - array.include, etc. 

outDir：輸出編譯結果的資料夾

可以參考 官網