代码之家  ›  专栏  ›  技术社区  ›  pcvnes

使用共享的webpack.config在monorepo中构建包会在包外创建dist

  •  0
  • pcvnes  · 技术社区  · 2 年前

    我正在准备一个单回购设置,该设置将用于将多个相关存储库合并到一个更大的回购中。 同时,Yarn 3.6.x版本安装在新的repo中,而旧的repo是v1版本。为了减少对配置文件的维护,我试图最大限度地使用共享配置。这些共享配置被放置在一个单独的工作空间中 configs 。将要迁移的转发移到工作区 packages .

    简化了单存储库的目录结构

    .
    ├── package.json
    ├── configs
    │   ├── babel
    │   │   ├── config
    │   │   │   └── babel.config.js
    │   │   └── package.json
    │   ├── typescript
    │   │   ├── config
    │   │   │   └── tsconfig.json
    │   │   └── package.json
    │   └── webpack
    │       ├── config
    │       │   └── webpack.config.js
    │       └── package.json
    ├── packages
        └── cancel
            ├── --webpack.config.js
            ├── src
            │   ├── index.tsx
            └── webpack.config.js
    
    
    

    其中项目根目录中的package.json包含

    {
        "name": "@myorg/monorepo",
        "version": "1.33.0",
        "private": true,
        "description": "demo",
        "repository": {
            "type": "git",
            "url": "https://gitlab.myorg.nl/myorg/mijn-team/frontends/monorepo"
        },
        "license": "ISC",
        "scripts": {
            "preinstall": "npx only-allow yarn && husky install",
            "build": "yarn workspaces foreach --parallel --include '**' run build"
        },
        "config": {
            "commitizen": {
                "path": "./node_modules/cz-conventional-changelog"
            }
        },
        "resolutions": {
            "babel-eslint-parser/semver": "^7.3.2"
        },
        "workspaces": [
            "packages/**",
            "configs/**"
        ],
        "devDependencies": {
            "commitizen": "^4.3.0",
            "cz-conventional-changelog": "^3.3.0",
            "husky": "^8.0.3"
        },
        "engines": {
            "node": "18"
        },
        "packageManager": "[email protected]",
        "team": "Mijn ORG",
        "title": "Monorepo setup"
    }
    
    

    中的package.json packages/cancel 包含脚本

    "scripts": {
            "build": "webpack --mode=production"
    }
    

    中的Webpack配置 包裹/取消 从加载 /configs/webpack 在里面 webpack.config.js

    const globalConfig = require('@myorg/webpackconfig/config/webpack.config.js');
    
    module.exports = globalConfig ;
    

    执行时 yarn build 中的包 包裹/取消 是内部版本,但不是内部版本 packages/cancel/dist 而是在 configs/webpack/config/dist 。此外,当将下面的语句添加到webpack-config时,请使用当前目录 configs/webpack/config 被记录为生成是从启动的 包裹/取消

    console.log(`curdir ${__dirname}`)
    

    当我复制时一切都很好 configs/webpack/config/webpack.config.js pakages/cancel 但这将导致monorepo中相同webpack配置的多个冗余副本。

    0 回复  |  直到 2 年前
        1
  •  0
  •   pcvnes    2 年前

    __dirname 是一个环境变量,它告诉包含当前执行文件的目录的绝对路径。在这种特定情况下,的位置通过 packages/cancel/webpack.config.js ,执行的位置 webpack.config.js 是`configs/webpack/config。

    这个 __目录名 Nodejs环境变量用于设置 webpack.config.js .

            entry: {
                index: path.resolve(__dirname, './src/index.tsx'),
            },
    

    因此的位置 dist 每个包裹都是一样的。这是通过传递的值来解决的 $INIT_CWD 在里面 curdir 其在执行运行命令时保存目录。

    "build": "webpack --config webpack.config.js --mode=production --env=curdir=$INIT_CWD",
    

    并使用此env变量来解析条目

        entry: {
          index: path.resolve(env.curdir, './src/index.tsx'),
        },
    

    也可以通过仅更改 webpack.config.js 通过从读取INIT_CWD process.env.INIT_CWD

        entry: {
          index: path.resolve(process.env.INIT_CWD, './src/index.tsx'),
        },
    
    推荐文章