Support decorators with Babel7
- Dominant language
- JavaScript
- Stars
- 4.4k
- Forks
- 217
- PR merge metrics
- No merged PRs in 30d
Description
Hi, babel-minify is sweet, although it doesn't appear to have support for decorators like MobX's `@observable`. It would be great to have this support when you release Babel7 support.
It appears that MinifyPlugin (which uses babel-minify under the hood) breaks when decorators are enabled, even though Babel supports them without minification (and no browser errors).
In the example below, the code compiles with MinifyPlugin but causes a browser error on load: `SyntaxError: Identifier 't' has already been declared`.
The only fixes that work are `mangle:false`, which bloats the JS, or removing decorators entirely. I tried using @babel/core@7.2.2 and babel-minify@0.6.0-alpha.5 (and 0.5.0), but nothing seems to work.
I used this .babelrc:
```
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
},
},
],
"@babel/preset-react",
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true}],
["@babel/plugin-proposal-class-properties", { "loose": true}]
]
}
```
and this webpack:
```
const MinifyPlugin = require('babel-minify-webpack-plugin')
...
new MinifyPlugin(),
```
Contributor guide
Research direction
Start with the reported .babelrc and webpack configuration using babel-minify-webpack-plugin's MinifyPlugin, then reproduce the decorator case with @babel/plugin-proposal-decorators in legacy mode. Trace the minified output around the reported duplicate `t` declaration and compare it with output when `mangle:false`; done means decorator-enabled code loads without the browser SyntaxError.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100