lerna使用初体验

目前只用到lerna最简单的功能，就是新建一个插件，并上传到npm上。之后用到相互依赖包或者其他功能再进行使用记录的完善。

1. 新建包

1.1 全局安装

npm i lerna -g
全局安装之后可以直接使用lerna命令

1.2 init

在需要的位置lerna init --independent

在生成的lerna.json中有个"version": "independent"，区别于直接lerna init 生成的是一个版本号，independent包可以单独控制版本号，个人认为比较便于管理。如果只是一个包改变没必要让其他包一起升级版本，之前用lerna init生成的插件库，每次改一个包，其他包莫名其妙就跟着一起升级了，虽然升级的时候指定包可以解决，但是因为是组内人员共同开发的或者是自己忘记了，就很容易混乱。正好看到这个可以独立版本，就尝试一下
下图是在空文件夹中初始化的lerna

下图是在vue脚手架中初始化的lerna，就直接在脚手架中执行命令，不会冲突，只是增加了文件

因为我想在发布之前，先在vue脚手架中验证打包之后功能，以后再看能不能放个vuepress文档

1.3 新增包

lerna create <name>
自动生成以下文件

我一般习惯再新建一个src文件，在src文件中编辑代码，再打包生成到lib中

1.4 打包

刚开始我以为只要lerna run build就可以了，但是控制台提示我没有build这个脚本命令，然后我找了百度，所有的文档都告诉我只要lerna run build。。。。。我迷茫了
所以为了能打包，在外面用rollup写了个打包js。。。。

1.4.1 安装rollup

目前只有js文件需要打包，所以只安装了压缩js的插件，其余的之后再完善
npm run rollup rollup-plugin-terser --dev

1.4.2 rollup配置项

文件的打包配置代码：
主流程：

import path from 'path';
import fs from 'fs';
import { terser } from 'rollup-plugin-terser'; // 压缩 js 代码

const configure = name => {
  let config = [];
  if (fs.existsSync(`packages/${name}/src/index.js`)) {
    // 对每一个进行配置项设置
    config = genereteJsConfig(name);
  }
  return config;
};
export default configure;

配置项

const genereteJsConfig = name => {
  const paths = {
    input: `packages/${name}/src/index.js`,
    output: `packages/${name}/lib`
  };
  // plugins 需要注意引用顺序
  const getPlugins = format => {
    // 是否为 umd 打包方式
    const isUmd = format === 'umd';
    return [
      isUmd && terser()
    ];
  };
 
  const setRollupMethod = (output, format) => {
    return {
      input: paths.input,
      output: {
        file: path.join(paths.output, output),
        format: format,
        name,
        globals: {
          vue: 'vue'
        }
      },
      external: ['vue'], // 指出应将哪些模块视为外部模块
      plugins: getPlugins()
    }
  }
  // rollup 配置项
  const rollupConfig = [
    setRollupMethod('index.esm.js', 'es'),
    setRollupMethod('index.umd.min.js', 'umd')
  ]
  return rollupConfig;
};

rollup.config.js整合文件，本来直接放个图好了，为了下次自己用的时候，可以直接复制，还是把代码放出来了

import fs from 'fs';
import configure from './configure.js';
// const packList = ['ellipsis']  // 指定打包的包名
const packList = []  // 空为全打包
export default () => {
  let configs =[];
  for (const name of fs.readdirSync('packages')) {
    if (packList.length) {
      if (!packList.includes(name)) continue;
    }
    configs = configs.concat(configure(name));
  }
  return configs;
}

1.4.3 打包脚本

在最外侧的package.json中写入执行脚本命令
"build": "rollup -c scripts/rollup.config.js"
执行npm run build，生成打包后文件

修改包中package.json中main指向的文件，files中增加src，下载的时候node_modules中就会存在未打包的src文件，方便开发查看；
"access":"public"表示公开的仓库，不是的可以不加

2. 注册npm官网账户

官网地址：https://www.npmjs.com/
sign in
create account
输入账号密码和邮箱
邮箱会收到一个验证码，输入验证码，验证成功

3. 发布包

现在本地npm login登录
照理是直接lerna publish 就可以了，但是我是本地测试，没有上传到git仓库，所以lerna publish会提示我远程仓库没有master分支。所以我是npm publish的，我也是后来才发现手敲的是npm publish而不是lerna publish。。。
npm publish --access public 刚开始package.json中有access设置了，命令就不用加

3.1 解决报错

刚开始没看懂，直到百度到一篇文章https://blog.51cto.com/u_11711012/4908048跟着操作就可以了，手机上要下载Authenticator（我感觉它一直在刷验证码，不知道吃不吃我流量）
然后再publish的时候要输入手机上几秒钟刷新一次的验证码This operation requires a one-time password from your authenticator.

因为我是在最外层执行的命令，可能读取到了最外层的package.json，所以我cd进了具体的包中，再执行成功了。
我用的是作用域下的包，所以package.json中的name是@npm用户名/包，不然会报错

3. 项目中使用

npm i 包 --dev

import { mountFun, render } from ''包名'