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

我正在准备一个monorepo设置，它将用于将多个相关的存储库合并到一个更大的存储库中。与此同时，Yarn版本3.6.x安装在新的存储库中，而旧存储库中的版本为v1。为了减少对配置文件的维护，我尝试最大限度地使用共享配置。这些共享配置被放置在单独的工作空间configs中。要迁移的存储库将移动到工作空间packages。
简化了monorepo存储库的目录结构

.
├── 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": "yarn@3.6.0",
    "team": "Mijn ORG",
    "title": "Monorepo setup"
}

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

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

packages/cancel中的Webpack配置从webpack.config.js中的/configs/webpack加载

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

module.exports = globalConfig ;

当执行yarn build时，packages/cancel中的包被构建，但不是在packages/cancel/dist中，而是在configs/webpack/config/dist中。另外，当将以下语句添加到webpack配置时，会记录当前目录configs/webpack/config，尽管构建是从packages/cancel启动的

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

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

__dirname是一个环境变量，它告诉您包含当前执行文件的目录的绝对路径。在这个特定的例子中，通过packages/cancel/webpack.config.js，执行的webpack.config.js的位置是configs/webpack/config。__dirnameNodejs环境变量用于设置webpack.config.js`中的条目。

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

因此，每个 Package 的dist位置相同。这可以通过在curdir中传递$INIT_CWD的值来解决，curdir在执行run命令时保存目录。

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

并使用这个env变量来解析条目

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

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

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

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

1条答案

相关问题

热门标签

最新问答