如果很多前端项目共用一个组件/方法,那么这个组件/方法就会被剥离出来,抽取出来的多了,就会成为组件库/模块包,这样做的好处就是,每次我们只要单独对组件库/模块包进行维护就可以达到所有项目里所引用组件/模块的更新。

  以vue项目的组件库(fe-standard-libs)为例,组件库地址会在package.json中被定义

{
  "name": "app",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-module",
  },
  "dependencies": {
    ...
    "fe-standard-libs": "git+https://xxxx.com/xxxx/xxxx.git#xxxxxxxx",
  },
"devDependencies": {
    ...
  }
}    

  但是每次对组件库进行维护的时候,就会出现无法,或是说很难进行调试的情况,总不能凭着感觉改,然后直接推到远程仓库更新组件库,最后在生产环境里验证吧,所以,这个时候就需要npm link来帮忙进行本地开发调试。

  首先,先进入本地组件库fe-standard-libs项目,然后执行npm link命令。即先cd fe-standard-libs,然后npm link。这个时候,这个项目会被链接到全局,windows下的路径是:{prefix}/node_modules/<package>,如果不知道prefix值的话,可以执行命令npm config get prefix获取。

   然后,你就可以在这个文件夹下找到fe-standard-libs项目的快捷方式。

   然后进入你的开发项目,叫app好了,先cd app,然后npm link fe-standard-libs。这个时候你到app/node_modules文件夹下去查看,也会发现多了一个fe-standard-libs项目的快捷方式,这个会优先于package.json下载下来在node_module的同名文件。然后npm run dev启动项目app,你就可以在项目fe-standard-libs中修改代码了,代码也会同步更新显示在app的页面中,如果app项目有开启热更新的话,你也可以看到同步看到Terminal执行热更新的过程。

  最后,如果开发调试完了,app与fe-standard-libs之间的软链接没去掉不管也没关系,但是要是有强迫症必须要去掉也行,在app项目中执行npm unlink fe-standard-libs即可断开二者的联系。

原文地址:http://www.cnblogs.com/jdWu-d/p/16745160.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性