前端本地依赖

发表于 | 分类于

  上次写的简单搭建一个react环境(一)，简单的整了几个常用的组件库，然后整了个test的set up。然而，当我做到一些用node写api的时候，发现有大量可复用的组件完全可以抽出来给服务端和客户端共同使用，最简单的就是接口类型定义，咱总不可能接口类型每个都在前后端项目存一份吧。

  事实上工作的项目上面也是一大堆的东西单独抽出来放到lib。类似于数据的类型信息，接口方法的类型信息，还有与业务关系不大的纯辅助函数(虽然这种辅助的算法函数第三方包多的是..)，其实都是可以放到第三方包的。

  在这里就记录一下如何构建一个包含前后端并且拥有本地依赖的项目。

  首先在项目同级目录建立一个node项目作为服务器项目，一个lib项目放自己的依赖项。
structure
  目前来说有看到npm以及yarn都可以做到依赖本地项目，如果需要比较深度的本地管理，lerna提供的特性比较多一点。

npm

  npm可以用link和install，install 指令可以直接npm install <>，npm link的方法烦的多：首先在chatroom-model运行npm link，这个时候chatroom-model会被加入到npm的全局module中，然后在需要依赖这个模块的项目中输入npm link <>，然后在模块中的package.json添上依赖的名字，运行npm install，然后可以自己去node_modules确认一下模块是否存在即可。如果没有的话，可以把package-lock.json删了再运行npm install就行。

1
2
3
"dependencies": {
   "your dependency project name": "*"
 },

  然而不管是用npm install还是npm link都需要自己去每个依赖项目下面进行一些操作。而且类似于npm link 这种将项目预先发布本地….我怀疑项目发布到GitHub用另一台电脑把项目拉下来后会需要再次手动link一次，具体会不会没有试过，因为发现yarn更好用更方便就失去了尝试的想法了

yarn

  先贴一个yarn的官方workspace的文档yarn workspace。
  首先，我们在总的根目录中创建一个package.json，内容为

1
2
3
4
{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}

具体结构如下图所示。

  yarn的workspace会把package.json里面的项目的共同依赖抽取出来放到根目录下的node_modules中，同时所有的项目也会被加入到根目录的node_modules中(本质上就是创建了一个创建快捷方式)。
  结构
  这个时候其实就已经完成了本地依赖了，唯一要注意的是一般来说，通用的依赖项目，比如上图所示的接口定义的model，我们的项目入口都是build出来的dist或者build文件夹中的index(其实也是看具体项目，反正就是package.json里面定义的main)。所以在每次修改完lib的时候记得build(一开始被这玩意儿坑惨了)
entry

前端包管理

  当前端多项目依赖的时候，就会有各种乱七八糟的问题。
  比如一个前端模块的主入口一般都是指定一个打包好的代码中的index.js文件，但是typescript需要编译后才生成index.js，这个时候修改第二方代码后需要先编译然后主项目才能受到影响。当依赖的第二方项目躲起来，并且需要修改多个第二方依赖项的时候，使用yarn一个一个去各项目执行yarn script，显得就很烦。这个时候就需要lerna来进行管理。
  全局安装lerna，然后在根目录新建lerna.json输入如下 

1
2
3
4
5
{
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "0.0.0"
}

  在项目根目录的package.json声明workspace和yarn script如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "private": true,
    "workspaces": [
        "file-control",
        "fileServer",
        "lib/**"
    ],
    "scripts": {
        "clean-build": "rimraf **/dist **/build",
        "clean-modules": "rimraf **/node_modules",
        "clean-install": "yarn clean-build && yarn clean-modules && yarn install",
        "build-lib":"lerna run build --scope \"file-server-models\"",
        "build-front":"lerna run build --scope \"file-control\"",
        "build-server":"lerna run build --scope \"fileServer\"",
        "build": "lerna run build"
    },
    "name": "fileServer",
    "devDependencies": {
        "lerna": "^3.22.1"
    }
}

  lerna run build会去所有的workspace执行一次yarn build，也可以用–scope来指定需要build的包，以满足CI的要求。rimraf是node中用来删除文件用的，这里就用来删除node_modules和build好的文件用。
  这里还有就是如果是node和前端项目是同一个大项目，这个时候需要前后端一起启动进行调试之类的，我们一般都可以打开两个命令行，然后分别启动前端和后端项目。但是有一说一这样很难看，这里推荐使用一个concurrently的node包，可以在一个命令行中启动两个命令。如下图所示workspace