# reusable-component-library

**Repository Path**: jixiang2013/reusable-component-library

## Basic Information

- **Project Name**: reusable-component-library
- **Description**: 多个项目共用组件动态打包单个项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-11-08
- **Last Updated**: 2021-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 需求

项目处于缓冲期,时间充裕,于是从vuecli2.x将脚手架升级为vuecli3.x,并且需要多个项目引用一些公用封装的组件库,工具库或资源之类,于是集成在一起.当时做的时候,vuecli4正好出来了,前项目就是用的vuecli3.x,只是说这个项目加入进来的时候,还是vue2.x

其实很简单,多个项目多种配置,根据明确启动项目的命令,找到项目,按照项目的配置打包即可.

## 如何配置

### vue.conifg.js

~~~js
const path = require('path');
const conf = require('./config/projectConfig');//引入多个项目的配置
module.exports = {
  pages: conf.pages,//使用不同的模板
  outputDir: conf.outputDir,//输出到不同的文件夹下
  devServer: conf.devServer,//代理服务器的配置不同,也主要是代理地址不同
 	…………
   chainWebpack: conf.chainWebpack,
  configureWebpack: conf.configureWebpack,
}
~~~

### projectConfig.js

文件就是部署项目的配置

~~~js
const projectName = require('./project');
const config = {
    projectA: {
      pages: {
        index: {
          entry: 'src/projects/projectA/main.js',
          template: 'public/index.html',
          filename: 'index.html',
        }
      },
      outputDir:'dist/projectA/',
      …………
    },
    projectB: {
      pages: {
        index: {
          entry: 'src/projects/projectB/main.js',
          template: 'public/index_s.html',
          filename: 'index.html',
        }
      },
      outputDir:'dist/projectB/',
      …………
    }
}

const configObj = config[projectName.name]//这一部控制导出哪个项目下的配置
module.exports = configObj
~~~

### project.js

该文件只做了一件事,导出当前你需要允许的项目名称,这不需要自己填写,会被你传递的参数自动写入

```
exports.name = 'projectA'
```

在解释./project文件是如何被写入当前运行项目名称时,看看packJason里如何使用这个命令.

~~~js
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "d": "node config/dev.js",
    "b": "node config/build.js"
  }
~~~

只需要看看dev.js

~~~js
let projectName = process.argv[2]//是通过拿到环境参数来控制向project.js文件写入一个运行的名称
let fs = require('fs')
//写入
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
let exec = require('child_process').execSync;
exec('npm run serve', {stdio: 'inherit'});
~~~

打印process来看看

~~~js
[ 'C:\\Program Files\\nodejs\\node.exe',
  'D:\\zy\\me\\new_learning_summary\\projects\\reusable-component-library\\config\\dev.js',
'projectA' ]
~~~

process 对象是node环境下的一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。process.argv 属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数，

其中：

数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径

第二个元素process.argv[1]——为当前执行的JavaScript文件路径

剩余的元素为其他命令行参数 

这里我们传入的便是当前执行项目的参数,也就是启动哪个项目是通过传参设定的

但这里要求,启动时黑框命令行,可视化下不知道如何添加变量参数(项目名称)

~~~
npm run d 项目名称
~~~

综上可看出nodejs的学习,对一个前端的重要性,下面是demo地址放在码云上.

地址:

下面是一些概念性的总结

vuecli2.x

vuecli3.x

cli3和cli2的区别