package.json 屬性問(wèn)題

最近用到了angular日歷控件，查看package的時(shí)候有個(gè)疑問(wèn)，文件中的metadat的作用是什么？這個(gè)控件代碼中定義了template，但是完全沒(méi)有走，dom交互部分用到的template都是json文件中的部分。很奇怪，求解釋?zhuān)@個(gè)metadata字段在package.json中的作用是什么？

回答

編輯回答

默念

好問(wèn)題。這個(gè)package.json實(shí)際是編譯之后的結(jié)果，你真正看這個(gè)控件的源碼的時(shí)候，它的源碼的package.json里是沒(méi)有這個(gè)metadata的，但是注意看源碼中package.json的最后幾行：

  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "ngPackage": {
    "lib": {
      "entryFile": "src/daterangepicker/index.ts",
      "externals": {
        "moment": "moment"
      },
      "umdModuleIds": {
        "moment": "moment"
      }
    },
    "dest": "dist"
  }

在這里，它暴露了它是用ng-packagr這個(gè)包來(lái)進(jìn)行編譯的，再查看上面的scripts部分：

  "build": "ng-packagr -p package.json"

果然，它用了ng-packagr編譯。所以npm里的package.json文件是由ng-packagr生成的，而不是作者手寫(xiě)的。

那么ng-packagr為什么會(huì)生成這么一個(gè)metadata呢？這就要談到Angular本身的編譯機(jī)制。

Angular的編譯分為JIT和AOT兩種，聽(tīng)上去特別高大上吧？其實(shí)就是即時(shí)編譯和預(yù)編譯的區(qū)別。正常情況下，你ng build得到的是即時(shí)編譯也就是JIT的結(jié)果，但如果你加個(gè)參數(shù)ng build --aot，你就得到了AOT也就是預(yù)編譯的結(jié)果，這時(shí)候Angular就幫你產(chǎn)生了這個(gè)metadata以及所有附加需要的文件。很顯然，ng-packagr采用了AOT的方式進(jìn)行編譯，所以有了這個(gè)metadata。