monorepo+lerna发布带@(scope)和不带@的npm包的流程

发布不带scope的包

1，首先 lerna init创建一个lerna项目
2，在生成的lerna.json文件中添加以下代码，表示使用yarn workspace管理依赖包

  "useWorkspaces": true,
  "npmClient": "yarn"

3，在项目根目录package.json文件中添加以下代码，与第2条功能相同，表示工作区域作用于packages文件夹下所有文件：

"workspaces": [
    "packages/*"
  ],

4，使用lerna创建一个包： lerna  create  geovis-componnets-base
5，修改生成的geovis-componnets-base包下的package.json，配置该包的打包方式为lib，打包入口为src/index.js，以及访问该包的入口是dist/base.umd.js

"private": false, //用于发布包
  "main": "dist/base.umd.js",  //文件读取入口
  "scripts": {
    "build": "vue-cli-service build --target lib --name base src/index.js" //项目构建的入口
  },
  "files": [  //发布该包的白名单，不在此名单下的文件，不会被发布
    "dist",
    "public",
    "src"
  ],

6，因为我的项目在vue-cli中构建，所以geovis-componnets-base包下还要创建vue.config.js，用于打包配置

const path = require('path')

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  //  chainWebpack: config => {
  //    config.entry('app').clear().add('src/index.js')
  // },
  //  css: {
  //   sourceMap: true,
  //   loaderOptions: {
  //     sass: {
  //       additionalData: `@import "./public/style.scss";`
  //     }
  //   }
  // },
  configureWebpack: {
    devtool: "source-map",
    externals: 'vue'
  }
}

6，geovis-componnets-base包下创建src/index.js文件：导出的是两个组件

import Vue from "vue";
import Earth from "./Earth.vue";
import PluginManager from "./PluginManager/index.vue"
Vue.component("Earth", Earth);
Vue.component("PluginManager", PluginManager);
export {
    Earth,
    PluginManager
}

7，进入geovis-componnets-base包目录下，执行：npm run build 进行打包
8，如果已经搭建了私有npm仓库，直接执行 npm publish
9，返回项目根目录，下载该geovis-componnets-base包： npm install geovis-componnets-base
10，引用该包：

<template>
  <div>
    <Earth :earthStore="earthStore" />
    <PluginManager :earthStore="earthStore" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { PluginManager, Earth } from "geovis-components-base"; 
Vue.component("PluginManager", PluginManager);
Vue.component("Earth", Earth);
export default Vue.extend({
  name: "EarthApp",
  data() {
    return {
    };
  }
});
</script>

<style scoped>
</style>

发布带scope的包

1，其他流程和不带scope的是一样的，只一点该包的文件夹名字取啥无所谓，但是packcage.json的name字段必须是@scopeName/包名：

"name": "@geo/components-test"

题外话：
我发布作用域包成功了，也成功安装了该包，但是import这个包的地方一直报错，找不到这个依赖，但是我打开node_modules发现这个依赖是有的，最后才发现是因为vue.config.js配置中，设置了与我的scope名相同的webpack路径别名：

    config.resolve.alias.set("@geo", path.join(__dirname, "src/geo"));

这样设置表示前缀是@geo的，一律到根目录下的src/geo找资源，所以无法使用下载的作用域包！