1、背景
公司有多个前端项目，每个项目独立部署，各个项目里可能会使用相同的组件或者页面。对于这样的组件或者页面如何管理呢？我们可以把公共的组件或者页面抽离，单独存放在一个项目里，然后在其他项目里引入这个公共的项目
2、方案
2.1 创建一个公共组件项目commonpack（名字自己定义），如下图
image.png
outPages目录里是公共组件pageA和pageB，然后在根目录下创建index.js,向外暴露组件pageA和pageB。index.js文件里面代码如下
import pageA from './outPages/pageA'
import pageB from './outPages/pageB'
export {
pageA,
pageB
}
2.2 创建一个标准的前端项目packageone,packagetwo，那么packageone,packagetwo如何来引入公共组件项目commonpack里的组件pageA和pageB呢？有3个方案。
方案一：npm发布引用
公共组件项目commonpack的组件编写完成后，将其发布到npm。开发packageone,packagetwo的人员通过npm install命令将commonpack以node_module的方式引入
npm install commonpack --save
另外，每次改动代码再次发布时，需要修改package.json文件中的版本号，不然发布不成功。
这种方法在开发阶段不便捷，改个公共组件，改完还得发包，发完后其他项目使用还得从新安装。
方案二：npm link
首先进入commonpack包，在控制台输入
npm link
这会创建一个软连接，并保存到目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下面。
然后进入packageone和packagetwo，在控制台输入
npm link commonpack
这就将这个公共的项目通过软连接的方式引入到项目里面来了。下图可以看到在node_modules中common包和其他的包文件夹样式是不一样的，common文件夹只是一个软链接。
image.png
这时修改commonpack项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。
需要注意的是，当项目包依赖更新后，也就是执行了 npm install xxx 之后，需要重新link common项目。而且使用npm link后本地package.json里没有记录，无法直观的查看本地包的引用。
方案三：npm本地file引用（推荐）
分别进入packageone和packagetwo，在控制台输入命令：
npm install ../commonpack/
其中/commonpack/是commonpack的相对路径，这里也可以输入绝对路径。
这样就将commonpack这个工程以node_module的方式引入到packageone和packagetwo项目中了。可以正常使用commonpack在index.js中导出的组件了。
命令执行完后，package.json里会多一条记录
image.png
同样这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。而且在package.json中有引入记录。
3、举例
我们在packageone项目里引入公共组件pageA和pageB
image.png
效果如下
image.png
网友评论