nathanjhood
commented
3 weeks ago found it...
const escapeStringRegexp = require('escape-string-regexp');
class InterpolateHtmlPlugin {
constructor(htmlWebpackPlugin, replacements) {
this.htmlWebpackPlugin = htmlWebpackPlugin;
this.replacements = replacements;
}
apply(compiler) {
compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
this.htmlWebpackPlugin
.getHooks(compilation)
.afterTemplateExecution.tap('InterpolateHtmlPlugin', data => {
// Run HTML through a series of user-specified string replacements.
Object.keys(this.replacements).forEach(key => {
const value = this.replacements[key];
data.html = data.html.replace(
new RegExp('%' + escapeStringRegexp(key) + '%', 'g'),
value
);
});
});
});
}
}
Issue
Current
package.json:Solution
Ideal
package.json- resembles a react app that has not beenejected. In our case, we can nicely pull the so-say "react-scripts" package from a directory nested within the project, like a monorepo:With the above in place, the idea would be that
ts-esbuild-react-scripts- or something it depends on - carries with it all the npm dependencies which our app needs, so that we just carryts-esbuild-react-scripts, and any additional processors like the CSS tools above.This will be particularly nice with regards to eslint/prettier (which may also be wrapped in their own dependency/config provider package, or we can use the CRA one).
This also has some added benefits, such as keeping some false-positive errors out of the IDE's intellisense path, where the
scriptsdir can be safely removed, sincets-esbuild-react-scriptswill be carrying them internally, instead of them living at the project root.Of course, all of the above reflects the changes made when one "ejects" a React app.
And thus, I've done the work required and identified the needs of the app structure enough that I probably could add the "eject" script and functionality in due course.