Improve Babel and Vue recipes

- Add webpack alias section to Babel and Vue recipes - Add exclusion of `node_modules` to `require-extension-hooks` in Vue recipe

Author: pearofducks

docs/recipes/babel.md

@@ -206,5 +206,31 @@ Now instead of requiring `@babel/register`, require `test/_register` instead.
 
 Note that loading `@babel/register` in every worker process has a non-trivial performance cost. If you have lots of test files, you may want to consider using a build step to compile your sources *before* running your tests. This isn't ideal, since it complicates using AVA's watch mode, so we recommend using `@babel/register` until the performance penalty becomes too great. Setting up a precompilation step is out of scope for this document, but we recommend you check out one of the many [build systems that support Babel](http://babeljs.io/docs/setup/). There is an [issue](https://github.com/avajs/ava/issues/577) discussing ways we could make this experience better.
 
+## Webpack aliases
+
+[Webpack aliases](https://webpack.js.org/configuration/resolve/#resolve-alias) can be used to provide a shortcut to deeply nested or otherwise inconvenient paths. If you already use aliases in your source files, you'll need to make sure you can use the same aliases in your test files.
+
+Install `babel-plugin-webpack-alias-7` as a dev-dependency. Then add the plugin to AVA's Babel config:
+
+`package.json`:
+
+```json
+{
+"ava": {
+"babel": {
+"testOptions": {
+"plugins": [
+[
+"babel-plugin-webpack-alias-7",
+{
+"config": "./path/to/webpack.config.test.js"
+}
+]
+]
+}
+}
+}
+}
+```
 
 [Babel options]: https://babeljs.io/docs/en/options

docs/recipes/vue.md

@@ -5,11 +5,14 @@ Translations: [Français](https://github.com/avajs/ava-docs/blob/master/fr_FR/do
 ## Dependencies
 
 - [Require extension hooks](https://github.com/jackmellis/require-extension-hooks):
-- `npm i --save-dev require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel`
+- `npm i --save-dev require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel@beta`
 
 - [browser-env](browser-testing.md)
 - `npm i --save-dev browser-env`
 
+- Optional: [babel-plugin-webpack-alias-7](https://github.com/shortminds/babel-plugin-webpack-alias-7) if you want to use [webpack aliases](https://webpack.js.org/configuration/resolve/#resolve-alias) or use them in your source files
+- `npm i --save-dev babel-plugin-webpack-alias-7`
+
 ## Setup
 
 The first step is setting up a helper to configure the environment to transpile `.vue` files and run in a browser like environment.
@@ -40,9 +43,11 @@ Vue.config.productionTip = false;
 // Setup vue files to be processed by `require-extension-hooks-vue`
 hooks('vue').plugin('vue').push();
 // Setup vue and js files to be processed by `require-extension-hooks-babel`
-hooks(['vue', 'js']).plugin('babel').push();
+hooks(['vue', 'js']).exclude(({filename}) => filename.match(/\/node_modules\//)).plugin('babel').push();
 ```
 
+**Note:** If you are using _babel-plugin-webpack-alias-7_, you must also exclude your webpack file - e.g. `filename.includes(/\/node_modules\//) || filename.includes('webpack.config.test.js')`
+
 You can find more information about setting up Babel with AVA in the [Babel recipe](babel.md).
 
 ## Sample snapshot test