vue-03 搭建环境### 搭建 Monorepo #### 依赖 typescript、rollup、rollup

搭建 Monorepo

依赖

typescript、rollup、rollup-plugin-typescript2 @rollup/plugin-node-resolve【引用其它的地方放模块】 @rollup/plugin-json[import 语法导入json] execa[同时打包多个项目 node的一个子进程子模块]

必须采用yarn管理工具

这个是维护其它项目的是个私有的包需要给package.json 加一个private

"private": true, "workspace": [ // 配置工作空间在哪里 "package/*" // 这下面所有的模块都要是一个包，只不过构建的时候可以统一的构建所以入口要都一摸一样 ],

两个包工程 reactivity yarn 初始化 share yarn 初始化

他们有统一的入口src

子工程的 package.json module 可以指定被esmodule 引入时候用的哪个入口

{
  "name": "@vue/reactivity",
  "version": "1.0.0",
  "main": "index.js",                       // 主要给commomjs 使用的
  "license": "MIT", 
  "module": "dist/reactivity.esm-bund.js",  // webpack工程化使用的module
  "buildOptions": {                         // <script src="aaa.js"></script> 可以在全局用的名字 这个字段也是个自定义的 这玩意是给rollup用的
    "name": "xxx",                          // 打包后的对外暴露的名字是xxx
    "format": [
        "cjs",                              // 打包后的产物
        "esm-bund",                         // esm
        "global",                           // 全局
    ]
  }
}

如何打包

yarn add xxx --ignore-workspace-root-check 代表给根去安装的

配置 vue-core的package.json的script

"scripts": {
    "dev": "node scripts/dev.js",            // 打包指定的package的包
    "build": "node scripts/build.js"         // 打包这个package下面所有的
  }


build.js 
/**
 * 打包所有的
 */

const fs = require("fs");

const execa = require("execa");

console.log(execa);

// console.log(fs);

const Dir = fs.readdirSync("package").filter(r => {
    if(fs.statSync(`package/${r}`).isDirectory())
    return r;
});

console.log(Dir);


/**
 * 对目标进行并行打包
 */

async function build(path){
    console.log("patH:::", path)
    // 这里需要开启子进程打包
    // execa 开启子进程 最终用rollup打包
    await execa("rollup", ['-c', '--environment', `ENV:${path}`], { stdio: 'inherit' }) // 采用rollup打包 stdio 子进程共享父进程的输出 enviroment 给一个环境变量
}

function buildAll(dics = [], func=()=>{}) {
    const res = []; // 打包的任务队列
    dics.forEach(item => {
       const p = func(item);
        res.push(p);
    })

    return Promise.all(res);
}

buildAll(Dir, build).then(res => {
    console.log("打包完成")
});


rollup.config.js

console.log(process.env.ENV, "@@@@@@@@@@@@@@@@");

const A = require("@rollup/plugin-json");
const B = require("rollup-plugin-typescript2");
const C = require("@rollup/plugin-node-resolve");
/**
 * 根据环境变量打包
 */

/**
 * rollup 可以用 es6的import
 */

const path = require("path");

const PACK_ROUTER = path.resolve(__dirname, 'package');

// 要打包的目标目录

const sourceDir = path.resolve(__dirname, `package/${process.env.ENV}`);

console.log("xsourceDir:::", sourceDir);

/**
 * 永远针对的是某个模块
 * @param {*} tpath 
 * @returns 
 */
function getResolve(tpath) {
    console.log("999999999999999999")
    return path.resolve(sourceDir, tpath);
}

console.log("aaagetResolve::", getResolve("package.json"))


/**
 * 因为装了json的导入 可以直接拿json
 */

const Config = require(getResolve("package.json"));

console.log("Config:::", Config);


const outputConfig = {
    "cjs": {
        file: getResolve(`${getResolve('dist')}/${Config.buildOptions.name}.cjs.js`),
        format: 'es',
    },
    "esm-bund": {
        file: getResolve(`${getResolve('dist')}/${Config.buildOptions.name}.esm-bund.js`),
        format: 'cjs',
    },
    "global": {
        file: getResolve(`${getResolve('dist')}/${Config.buildOptions.name}.global.js`),
        format: 'iife', // iife立即执行函数 或者umd
    }
}

console.log("outputConfig:::::", outputConfig);


const buildOptions = Config.buildOptions;


console.log("buildOptions:::", buildOptions.format);


const T = buildOptions.format.map(item => {
    return outputConfig[item];
})


console.log("T:::::::", T);

function create(c, Config) {
    console.log("AAAA::::", c, "BBBB:::", Config)

    Config.name = buildOptions.name;

    Config.sourcemap = true;

    // 生成 rollup 配置

    return {
        input: getResolve("src/index.ts"),
        output:  Config,
        plugins: [
            A(),
            B({
                tsconfig:  path.resolve(__dirname, 'tsconfig.json')
            }), // 需要生成ts配置文件
            C(),
            
        ]
    };
}

// rollup 最终需要导出一个配置
module.exports = ("***********", buildOptions.format.map(item => create(item,outputConfig[item])));

具体源代码在

gitee.com/luchaoding/…

格式介绍

cjs 给node用的 es 给esmodule用的 global 给script直接引入用的

如何打包某一个具体的

当我执行 yarn install 的时候 package的东西都被放到了node_modules了面了自动产生软连接 workspace起到的作用告诉node_modules用了哪些包。

可以直接在 package/reactivity/src/index.ts 中使用

import share from "@vue/share"; 的内容了 "@vue/share" 这个是软连接所以就用到了package/下面的share了

这时候是不能用的需要添加一个配置

// 配置ts moduleResolution

"moduleResolution": "node",   
"baseUrl": "./",  
"paths": {
      "@vue/*": [ // 查找 @vue 这个东西的时候来 "package/*/src" 下面找
        "package/*/src"
      ]
    }

vue-03 搭建环境