Closed kien-cs closed 3 months ago
+1 missing this feature is really a pain while migrate from webpack to esbuild...
My current workaround: create an esbuild plugin to simulate this.
esbuild.config.ts
// eslint-disable-next-line @typescript-eslint/no-var-requires
const fs = require("fs");
// task config name which is the environment name: [staging, production]
const envName = process.env.NX_TASK_TARGET_CONFIGURATION;
// a simple plugin to replace environment source file based on the build environment
const fileReplacementsPlugin = {
name: "fileReplacements",
setup(build) {
build.onLoad(
{ filter: /environments\/environment.ts/, namespace: "file" },
async (args) => {
const fileReplacementPath = args.path.replace(
"environment.ts",
`environment.${envName}.ts`
);
const fileReplacementContent = fs.readFileSync(
fileReplacementPath,
"utf8"
);
return { contents: fileReplacementContent, loader: "default" };
}
);
},
};
module.exports = {
plugins: envName ? [fileReplacementsPlugin] : [],
outExtension: {
".js": ".js",
},
};
project.json
{
"name": "my-project",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"targets": {
"build": {
"executor": "@nx/esbuild:esbuild",
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist",
"main": "my-project/src/main.ts",
"tsConfig": "my-project/tsconfig.app.json",
"esbuildConfig": "my-project/esbuild.config.ts"
},
"configurations": {
"production": {},
"staging": {}
}
}
Thx @kien-cs, your fix is effective !
My current workaround: create an esbuild plugin to simulate this.
esbuild.config.ts
// eslint-disable-next-line @typescript-eslint/no-var-requires const fs = require("fs"); // task config name which is the environment name: [staging, production] const envName = process.env.NX_TASK_TARGET_CONFIGURATION; // a simple plugin to replace environment source file based on the build environment const fileReplacementsPlugin = { name: "fileReplacements", setup(build) { build.onLoad( { filter: /environments\/environment.ts/, namespace: "file" }, async (args) => { const fileReplacementPath = args.path.replace( "environment.ts", `environment.${envName}.ts` ); const fileReplacementContent = fs.readFileSync( fileReplacementPath, "utf8" ); return { contents: fileReplacementContent, loader: "default" }; } ); }, }; module.exports = { plugins: envName ? [fileReplacementsPlugin] : [], outExtension: { ".js": ".js", }, };
project.json
{ "name": "my-project", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "application", "targets": { "build": { "executor": "@nx/esbuild:esbuild", "outputs": [ "{options.outputPath}" ], "options": { "outputPath": "dist", "main": "my-project/src/main.ts", "tsConfig": "my-project/tsconfig.app.json", "esbuildConfig": "my-project/esbuild.config.ts" }, "configurations": { "production": {}, "staging": {} } }
LEGEND
Description
nx had existing support for fileReplacements for other plugin, but looks like it doesn't have one for
esbuild
executor.I would like to do something like this, where I can replace a staging environment config for a staging configuration build.
Motivation
This is already supported by other plugin (webpack, vite, etc) but not at esbuild
Suggested Implementation
Add
fileReplacements
supportAlternate Implementations
N/A