Angular 5中自定义node_modules内pdfmake文件的正确方式

嗨，我完全懂你的顾虑——直接修改node_modules里的文件确实是个临时方案，每次执行npm install都会把你的自定义改动覆盖掉，而且团队里其他成员拉代码后也看不到你的修改。下面有两个不用放弃npm便利的靠谱方案：

方案1：生成自定义vfs_fonts.js并放入项目源码（推荐） #

这是最稳妥的方式，完全脱离node_modules的依赖：

• 用pdfmake官方提供的字体生成工具，上传你的自定义字体，生成专属的vfs_fonts.js文件
• 将这个文件放到你的Angular项目的assets目录下，比如src/assets/pdfmake/vfs_fonts.js
• 打开.angular-cli.json（Angular5的配置文件），找到scripts数组，把原来指向node_modules里的vfs_fonts.js的路径替换成你刚放的自定义文件路径，比如：

  "scripts": [
    "../node_modules/pdfmake/build/pdfmake.js",
    "./assets/pdfmake/vfs_fonts.js"
  ]
  

• 最后把这个自定义的vfs_fonts.js提交到你的版本控制系统（比如Git），这样其他成员拉代码后就能直接用你的自定义字体了。

方案2：用postinstall脚本自动覆盖文件 #

如果你不想调整项目配置，这个方案可以让npm帮你自动同步修改：

• 先把你修改好的vfs_fonts.js备份到项目里的某个目录，比如src/custom-pdfmake/vfs_fonts.js
• 在项目根目录的package.json里添加一个postinstall脚本：
  • 如果你用的是Mac/Linux，脚本可以写：

    "scripts": {
      ...
      "postinstall": "cp src/custom-pdfmake/vfs_fonts.js node_modules/pdfmake/dist/vfs_fonts.js"
    }
    

  • 如果你需要跨平台兼容（Windows/Mac/Linux），可以先安装cpy工具：npm i cpy --save-dev，然后脚本改成：

    "scripts": {
      ...
      "postinstall": "cpy src/custom-pdfmake/vfs_fonts.js node_modules/pdfmake/dist/"
    }
    

• 这样每次执行npm install之后，npm会自动运行这个脚本，把你的自定义文件复制到node_modules对应的位置，不用手动操作。

小提示 #

不管用哪个方案，一定要把你的自定义vfs_fonts.js文件提交到版本控制里，不然其他机器拉代码后还是会丢失你的修改哦！

内容的提问来源于stack exchange，提问作者Steve B