refactor(babel): use individual plugins instead of stage presets

yyx990803 · yyx990803 · commit da833d607e83 · 2018-07-27T13:00:23.000-04:00
BREAKING CHANGE: @vue/babel-preset-app no longer includes @babel/preset-stage-2.
Now the only pre stage-3 proposals included are dynamic import, decorators and
class properties. This is because Babel 7 will be removing stage presets
altogether.
diff --git a/packages/@vue/babel-preset-app/README.md b/packages/@vue/babel-preset-app/README.md
@@ -2,26 +2,40 @@
 
 This is the default Babel preset used in all Vue CLI projects. **Note: this preset is meant to be used exclusively in projects created via Vue CLI and does not consider external use cases.**
 
-## Included
-
-- [@babel/preset-env](https://new.babeljs.io/docs/en/next/babel-preset-env.html)
-  - `modules: false`
-    - auto set to `'commonjs'` in Jest tests
-  - [`useBuiltIns: 'usage'`](#usebuiltins)
-  - `targets` is determined:
-    - using `browserslist` field in `package.json` when building for browsers
-    - set to `{ node: 'current' }` when running unit tests in Node.js
+## Included Features
+
+### [@babel/preset-env](https://new.babeljs.io/docs/en/next/babel-preset-env.html)
+
+`preset-env` automatically determines the transforms and polyfills to apply based on your browser target. See [Browser Compatibility](https://cli.vuejs.org/guide/browser-compatibility.html) section in docs for more details.
+
+- `modules: false`
+  - auto set to `'commonjs'` in Jest tests
+- [`useBuiltIns: 'usage'`](#usebuiltins)
+- `targets` is determined:
+  - using `browserslist` field in `package.json` when building for browsers
+  - set to `{ node: 'current' }` when running unit tests in Node.js
 - Includes `Promise` polyfill by default so that they are usable even in non-transpiled dependencies (only for environments that need it)
-- [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime)
-  - Only enabled for helpers since polyfills are handled by `babel-preset-env`
-- [dynamic import syntax](https://github.com/tc39/proposal-dynamic-import)
-- [Object rest spread](https://github.com/tc39/proposal-object-rest-spread)
-- [babel-preset-stage-2](https://github.com/babel/babel/tree/master/packages/babel-preset-stage-2)
-- Vue JSX support
-  - [@babel/plugin-syntax-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-jsx)
-  - [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
-  - ~~[babel-plugin-jsx-event-modifiers](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers)~~ (temporarily disabled until fixed for Babel 7)
-  - ~~[babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)~~ (temporarily disabled until fixed for Babel 7)
+
+### Stage 3 or Below
+
+Only the following stage 3 or below features are supported (object reset spread is supported as part of `preset-env`):
+
+- [Dynamic Import Syntax](https://github.com/tc39/proposal-dynamic-import)
+- [Proposal Class Properties](https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html)
+- [Proposal Decorators (legacy)](https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html)
+
+If you need additional stage 3 or below features, you need to install and configure it yourself.
+
+### Vue JSX support
+
+- [@babel/plugin-syntax-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-jsx)
+- [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
+- ~~[babel-plugin-jsx-event-modifiers](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers)~~ (temporarily disabled until fixed for Babel 7)
+- ~~[babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)~~ (temporarily disabled until fixed for Babel 7)
+
+### [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime)
+
+`transform-runtime` avoids inlining helpers in every file. This is enabled for helpers only, since polyfills are handled by `babel-preset-env`.
 
 ## Options
 
diff --git a/packages/@vue/babel-preset-app/index.js b/packages/@vue/babel-preset-app/index.js
@@ -121,13 +121,14 @@ module.exports = (context, options = {}) => {
   // pass options along to babel-preset-env
   presets.push([require('@babel/preset-env'), envOptions])
 
-  // stage 2. This includes some important transforms, e.g. dynamic import
-  // and rest object spread.
-  presets.push([require('@babel/preset-stage-2'), {
-    loose,
-    useBuiltIns: useBuiltIns !== false,
-    decoratorsLegacy: decoratorsLegacy !== false
-  }])
+  // additional <= stage-3 plugins
+  // Babel 7 is removing stgage presets altogether because people are using
+  // too much unstable proposals. Let's be conservative in the defaults here.
+  plugins.push(
+    require('@babel/plugin-syntax-dynamic-import'),
+    [require('@babel/plugin-proposal-decorators'), { legacy: decoratorsLegacy !== false }],
+    [require('@babel/plugin-proposal-class-properties'), { loose }],
+  )
 
   // transform runtime, but only for helpers
   plugins.push([require('@babel/plugin-transform-runtime'), {
diff --git a/packages/@vue/babel-preset-app/package.json b/packages/@vue/babel-preset-app/package.json
@@ -23,8 +23,10 @@
   "dependencies": {
     "@babel/plugin-syntax-jsx": "7.0.0-beta.47",
     "@babel/plugin-transform-runtime": "7.0.0-beta.47",
+    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
+    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.47",
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.47",
     "@babel/preset-env": "7.0.0-beta.47",
-    "@babel/preset-stage-2": "7.0.0-beta.47",
     "@babel/runtime": "7.0.0-beta.47",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-dynamic-import-node": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
