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
Will/does Webpack support "module" field? #1979
Comments
I +1 this. Proposed:
However... Should Kind regards, |
Coming from remix-run/react-router#3333, I'd really like if there were a way to specify the location of the ES module build for webpack users. I'm a little bit frightened that people are importing from the subdirectory containing the ES modules directly. |
+1 to be a default as @IngwiePhoenix says. Is there a current way to plugin a resolver to webpack 2 to prefer |
@sokra I could take a stab at this if this is as easy as it appears to be. |
Why do you need a plugin for this? Just set e.g. mainFields: ['jsnext:main', 'browser', 'main'] in your webpack config. |
@taion - The problem with this approach is transitive dependencies (or so it seemed when I tried it). I don't think it is as simple as it looks to simply configure or plug-in, it needs to be considered in the primary resolution so that we can take advantage of tree-shaking etc. |
It works just fine transitively. |
That is my error in that case; if you have figured it out I'm sure all the participants here would like to see an example of this running. |
In resolve: {
mainFields: ['jsnext:main', 'browser', 'main'],
}, That's all you need. |
hmm, that didn't work for me when I tried it and I had multiple transitive dependency failures. Several projects including |
I'd assume this would be a desired default with fallback for main. No? |
Besides adding |
That works for me {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules\/(?!(([^\/]+?\/){1,2}(src|es6)))/,
} Tested it here |
that matches Webpack supports callbacks for exclude/include; in the past, I've set up logic to do this:
but if Webpack will support |
Babel doesn't need to process anything in |
Take a look at e.g. how Redux and React Router do this. |
Hmm, right. That's maybe good enough in general. There are downsides, though: your host project's babel plugins do not get applied to the (e.g.) React components you And when |
Another thought: What about the (not too distant?) future where we want to ship ES2015 code to browsers? Surely packages will mostly be written in ES2016 (or ES2017) then — so they'd need to provide ES5 and ES2015 (and eventually ES2016) builds. ¯_(ツ)_/¯ (WebAssembly support can't come fast enough IMO...) |
wasm isn't going to fix anything because if for some bizarre reason you decide to compile JS to wasm, you're effectively opting out of the bulk of things that the JIT can do. Yes, it's true that the "projects ship transpiled code" has some set of disadvantages – but that's orthogonal to the question of the choice of module system used for distribution. |
Webpack 2 still in beta, so it's just temporary workaround
Yep, but modules like redux-form or moment use |
@hccampos Hey Hugo, Unexpected token: name (CalendarVietnamese) [0.a821737870a81bd01043.chunk.js:8779,6] When I removed the "module" from that package compilation works fine. Any suggestions? |
@scopsy the only solutions I know of at the moment are:
We are using option 2 and just maintaining forks of the original repos for libraries that don't work with the Angular CLI |
@hccampos When ejecting the webpack config what needs to be changed there? |
I think we might be conflating two different things here. The module entry point should point to code with ES6 modules but not necessarily other ES6 features. People who want their libraries to be in ESM format can/should still precompile other ES6 features so that older browsers don't break. |
I asked for this as a feature request to support this as a native webpack feature a while ago, if someone is interested in this topic: #2933. |
@gaearon absolutely! That is what MobX does, for example. However, more and more libraries seem to be popping up which don't transpile the rest to es5, breaking builds which run without babel/bubble. The worst part is that you only notice the breakage when testing on older browsers, which usually happens on a CI environment or manually after deploy. |
…ck's tree shaking. This is currently *not* supported by Webpack (see webpack/webpack#1979 (comment) and webpack/webpack#2933 for rationale). We workaround this by exposing our babel config to the wild (i.e. js/nagato/babel-options.js). This way we can give full controls for both bundling (i.e. 'tree shaking' in Webpack) and module building (i.e. 'transpiling') to the library users (I hope). We just can't enforce our users to use some huge-sized arbitrary bundle. Users with ES2015+ (or whatever) environment shall `require()` this config file inside their 'webpack.config.js', and use it as a hash object for the `babel-loader`'s `option: ` option. This could be achieved by looking into the `module: ` option in `package.json`; which (I believe) is the default behavior for Webpack when you use the native `import Something from 'other-external-library'` syntax. If this is not desirable, use the fully-transpiled .js file inside our distributed npm package. This could be achieved by referring to the old-school `"main"` value inside the package.json. Disclaimer: By using this method we abandon Webpack-specific aggresive transpilation features for our entire library. This means we can't use Webpack-specific custom `import`s (i.e. importing non-JavaScript files like images (.png, .jpg, etc.) inside our library (.js)). Additional notes: This issue described in the disclaimer section can be workarounded by specifying your library-specific `npm run build` action inside the `prepare` section of package.json.
To allow importing of ES6 modules with an ES5 module in the package.json's "main" field.
As proposed by rollup.
The text was updated successfully, but these errors were encountered: