New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[question]Use react from CDN #806
Comments
I think you can make it works like following
|
^ that's correct. This is plugin code that would go inside the |
I understand this can be achieved using a plugin.
|
How slow? Have you done performance measurements? This shouldn't really result in any slowdown since it uses a filter so it only matches one path, not all paths. The plugin will run once and and it will be in parallel with the rest of the build. Because esbuild is parallelized, the plugin will only block the resolution and loading of the |
Although to answer your original question, you could potentially have some luck adding |
I think it's not a problem for simple case like this, but when it comes to complex external scenario, it's kind of too tricky to write a right regular expression to cover all externals. |
Here is some code for constructing a regular expression in case it's helpful: let escapeForRegExp = text => `^${text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}$`
let filter = new RegExp(externals.map(escapeForRegExp).join('|')) |
I'm going to close this issue because I believe this question has been answered. |
Note the esbuild can bundle my working demo in 16ms within a cold start. Our compiler in general can finish compiling a file within 10ms. While Node takes 40ms to start so clearly any short lived program written in Node will be subpar. For common use cases, i wish esbuild can handle it out of box without resolving to a plugin system which is may drag things slow down bit by bit |
@evanw This kind of works, but it introduced commonjs modules which is not desired. For example, it generates code like this // ... lots of code for `__toModule`
// globalExternal:react
var require_react = __commonJS((exports, module) => {
module.exports = globalThis.React;
});
// globalExternal:react-dom
var require_react_dom = __commonJS((exports, module) => {
module.exports = globalThis.ReactDOM;
});
var React = __toModule(require_react()), ReactDom = __toModule(require_react_dom()); The ideal output would be var React = globalThis.React
var ReactDOM = globalThis.ReactDOM Is there any way to achieve that? thanks |
I don't think there is a way to achieve that, no. For one thing the calls to |
Indeed, after digging a little bit, this is some intentional difference between ESM and commonjs https://stackoverflow.com/questions/29844074/es6-export-all-values-from-object |
Another thought: React is in CommonJS module format, not ESM format, so arguably it makes sense to do |
unfortunately react does not settle on ES modules (facebook/react#11503) build.onLoad(..., args => return {replacement: 'globalThis.React'}) |
So suppose I have a file like below:
Is there any way to configure it that esbuild knows "react" comes from
globalThis.React
(by using CDN: https://cdnjs.com/libraries/react)external comes close but it still emits import code which does not work properly
The text was updated successfully, but these errors were encountered: