package.json 属性问题

Question

最近用到了angular日历控件，查看package的时候有个疑问，文件中的metadat的作用是什么？这个控件代码中定义了template，但是完全没有走，dom交互部分用到的template都是json文件中的部分。很奇怪，求解释，这个metadata字段在package.json中的作用是什么？

Answer 1

好问题。这个package.json实际是编译之后的结果，你真正看这个控件的源码的时候，它的源码的package.json里是没有这个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这个包来进行编译的，再查看上面的scripts部分：

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

果然，它用了ng-packagr编译。所以npm里的package.json文件是由ng-packagr生成的，而不是作者手写的。

那么ng-packagr为什么会生成这么一个metadata呢？这就要谈到Angular本身的编译机制。

Angular的编译分为JIT和AOT两种，听上去特别高大上吧？其实就是即时编译和预编译的区别。正常情况下，你ng build得到的是即时编译也就是JIT的结果，但如果你加个参数ng build --aot，你就得到了AOT也就是预编译的结果，这时候Angular就帮你产生了这个metadata以及所有附加需要的文件。很显然，ng-packagr采用了AOT的方式进行编译，所以有了这个metadata。

至于这个AOT产生的这个metadata有什么用，它的作用就是可以让用户在二次编译的时候节省时间。具体细节可以通过看咱们SegmentFault上的这篇文章来进一步了解。