karrot v1.1.2

通过安装包的形式管理各个定制化项目开发的代码，使用命令行参数判断使用哪个安装包的代码，注入到主项目代码中。

一、创建新的定制化项目

1、创建项目目录结构如下：

|-- lib
|     |-- Nav.vue
|     |-- methodHandle.js
|-- index.js

2、创建package.json

npm init

package.json

{
"name": "${packageName}",
"version": "1.1.0",
"main": "index.js"
}

packageName命名规则可参考@${mainProject}/resource-${projectEnv}，eg. @ctg/pc-privatization

3、入口文件输出模块

index.js

import Karrot from 'karrot'
import Nav from './lib/nav.vue'
import method from './lib/methodHandle.js'
Karrot.provide('${projectEnv}', {
     project_name: 'xxx',
     method,
     nav: Nav
})

二、开发阶段

1、主项目安装

安装karrot

npm i karrot --save-dev
// or
yarn add karrot --dev

2、主项目配置定制化项目包

karrot.config.js

module.exports = {
  privatization: '@ctg/pc-privatization',
  "${projecEnv}" : "${packageName}"
}

3、主项目修改配置

vue.config.js

import path from 'path'
const packageMap = require('../karrot.config.js')

module.exports =  {
  pages: {
    index: {
      entry: [
        packageMap[process.env.PROJECT_ENV]
          ? path.join('node_modules', packageMap[process.env.PROJECT_ENV])
          : '',
        'src/main.js'
      ].filter(item => item)
    }
  }
}

4、把定制化项目链接到全局

进入定制化项目执行 npm link

5、在主项目链接定制化项目

进入主项目执行 npm link ${packageName}

6、启动主项目

package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "karrot:serve": "karrot npm run serve"
  }
}

设置项目变量运行 npm run karrot:serve -- --env privatization

若没有设置默认为 common

7、Vue模板注入代码

main.js

import Vue from 'vue'
import Karrot from 'karrot'
Vue.use(Karrot)

home.vue

<template>
  <div>
    <KarrotInject module="nav">
      <!-- 当没有对应的模块或注入不成功时，使用以下代码 -->
      <div class="nav">...</div>
    </KarrotInject>
  </div>
</template>

8、Js注入代码

import Karrot from 'karrot'

// 注入变量
let projectName = Karrot.injectJs('project_name')

// 注入方法
Karrot.injectJs('method', () => {
  // 当没有对应的模块或注入不成功时，使用以下代码
  console.log('no method')
})

三、生产阶段

1、定制化项目包发布

更新版本号

package.json

{
"name": "${packageName}",
"version": "1.1.0",
"main": "index.js"
}

发布

npm publish

2、主项目打包

更新定制化项目包版本号

package.json

{
  "scripts": {
    "build": "vue-cli-service build",
    "karrot:build": "karrot npm run build"
  },
 "dependencies": {
    "${packageName}": "^1.1.0"
  }
}

运行 npm run karrot:build -- --env privatization