Skip to content

Commit 7e058ea

Browse files
committed
docs: babel, cypress, nightwatch
1 parent caaeaab commit 7e058ea

File tree

5 files changed

+162
-2
lines changed

5 files changed

+162
-2
lines changed
Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
11
# @vue/babel-preset-app
22

3-
> babel-preset-app for vue-cli
3+
This is the default Babel preset used in all Vue CLI projects.
4+
5+
## Included
6+
7+
- [babel-preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
8+
- `modules: false`
9+
- auto set to `'commonjs'` in Jest tests
10+
- [`useBuiltIns: 'usage'`](https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins-usage)
11+
- ensures polyfills are imported on-demand
12+
- `targets` is determined:
13+
- using `browserslist` field in `package.json` when building for browsers
14+
- set to `{ node: 'current' }` when running unit tests in Node.js
15+
- [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime)
16+
- Only enabled for helpers since polyfills are handled by `babel-preset-env`
17+
- [dynamic import syntax](https://github.com/tc39/proposal-dynamic-import)
18+
- [Object rest spread](https://github.com/tc39/proposal-object-rest-spread)
19+
- [babel-preset-stage-2](https://github.com/babel/babel/tree/master/packages/babel-preset-stage-2)
20+
- Vue JSX support
21+
- [@babel/plugin-syntax-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-jsx)
22+
- [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
23+
- [babel-plugin-jsx-event-modifiers](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers)
24+
- [babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)
25+
26+
## Options
27+
28+
- **modules**
29+
30+
Default:
31+
- `false` when building with webpack
32+
- `'commonjs'` when running tests in Jest.
33+
34+
Explicitly set `modules` option for `babel-preset-env`.
35+
36+
- **targets**
37+
38+
Default:
39+
- determined from `browserslist` field in `package.json` when building for browsers
40+
- set to `{ node: 'current' }` when running unit tests in Node.js
41+
42+
Explicitly set `targets` option for `babel-preset-env`.
43+
44+
- **jsx**
45+
46+
Default: `true`. Set to `false` to disable JSX support.
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
11
# @vue/cli-plugin-babel
22

33
> babel plugin for vue-cli
4+
5+
## Transpilation
6+
7+
Uses Babel 7 + `babel-loader` + [@vue/babel-preset-app](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) by default, but can be configured via `.babelrc` to use any other Babel presets or plugins.
8+
9+
By default, `babel-loader` is only applied to files inside `src` and `test` directories. If you wish to explicitly transpile a dependency module, you will need to configure webpack in `vue.config.js`:
10+
11+
``` js
12+
module.exports = {
13+
chainWebpack: config => {
14+
config
15+
.rule('js')
16+
.include
17+
.add(/module-to-transpile/)
18+
}
19+
}
20+
```
21+
22+
## Injected Config Rules
23+
24+
- `config.rule('js')`
25+
26+
## Caching
27+
28+
[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/cache-loader`.
29+
30+
## Parallelization
31+
32+
[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `vue.config.js`.
33+
34+
## Installing in an Already Created Project
35+
36+
``` sh
37+
npm install -D @vue/cli-plugin-babel
38+
vue invoke babel
39+
```
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,47 @@
11
# @vue/cli-plugin-e2e-cypress
22

33
> e2e-cypress plugin for vue-cli
4+
5+
This adds E2E testing support using [Cypress](https://www.cypress.io/).
6+
7+
Cypress offers a rich interactive interface for running E2E tests, but currently only supports running the tests in Chromium. If you have a hard requirement on E2E testing in multiple browsers, consider using the Selenium-based [@vue/cli-plugin-e2e-nightwatch](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch).
8+
9+
## Injected Commands
10+
11+
### `vue-cli-service e2e`
12+
13+
run e2e tests headlessly with `cypress run`.
14+
15+
Options:
16+
17+
```
18+
--url run e2e tests against given url instead of auto-starting dev server
19+
-s, --spec runs a specific spec file. defaults to "all"
20+
```
21+
22+
Additionally, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run).
23+
24+
### `vue-cli-service e2e:open`
25+
26+
run e2e tests in interactive mode with `cypress open`.
27+
28+
Options:
29+
30+
```
31+
--url run e2e tests against given url instead of auto-starting dev server
32+
```
33+
34+
Additionally, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open).
35+
36+
Both commands automatically starts a server in production mode to run the e2e tests against. If you want to run the tests multiple times without having to restart the server every time, you can start the server with `vue-cli-service serve --mode production` in one terminal, and then run e2e tests against that server using the `--url` option.
37+
38+
## Configuration
39+
40+
We've pre-configured Cypress to place most of the e2e testing related files under `<projectRoot>/test/e2e`. You can also check out [how to configure Cypress via `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options).
41+
42+
## Installing in an Already Created Project
43+
44+
``` sh
45+
npm install -D @vue/cli-plugin-e2e-cypress
46+
vue invoke e2e-cypress
47+
```
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,33 @@
11
# @vue/cli-plugin-e2e-nightwatch
22

33
> e2e-nightwatch plugin for vue-cli
4+
5+
## Injected Commands
6+
7+
### `vue-cli-service e2e`
8+
9+
run e2e tests with [NightwatchJS](nightwatchjs.org).
10+
11+
Options:
12+
13+
```
14+
--url run e2e tests against given url instead of auto-starting dev server
15+
-e, --env specify comma-delimited browser envs to run in (default: chrome)
16+
-t, --test sepcify a test to run by name
17+
-f, --filter glob to filter tests by filename
18+
```
19+
20+
Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js).
21+
22+
## Configuration
23+
24+
We've pre-configured Nightwatch to run with Chrome by default. If you wish to run e2e tests in additional browsers, you will need to add a `nightwatch.config.js` or `nightwatch.json` in your project root to configure additional browsers. The config will be merged into the [internal Nightwatch config](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-e2e-nightwatch/nightwatch.config.js).
25+
26+
Consult Nightwatch docs for [configuration options](http://nightwatchjs.org/gettingstarted#settings-file) and how to [setup browser drivers](http://nightwatchjs.org/gettingstarted#browser-drivers-setup).
27+
28+
## Installing in an Already Created Project
29+
30+
``` sh
31+
npm install -D @vue/cli-plugin-e2e-nightwatch
32+
vue invoke e2e-nightwatch
33+
```

packages/@vue/cli-plugin-e2e-nightwatch/index.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ module.exports = (api, options) => {
2525
// expose dev server url to tests
2626
process.env.VUE_DEV_SERVER_URL = url
2727
// expose user options to config file
28-
process.env.VUE_NIGHTWATCH_USER_OPTIONS = JSON.stringify(options.nightwatch || {})
28+
const fs = require('fs')
29+
let userOptionsPath, userOptions
30+
if (fs.existsSync(userOptionsPath = api.resolve('nightwatch.config.js'))) {
31+
userOptions = require(userOptionsPath)
32+
} else if (fs.existsSync(userOptionsPath = api.resolve('nightwatch.json'))) {
33+
userOptions = require(userOptionsPath)
34+
}
35+
process.env.VUE_NIGHTWATCH_USER_OPTIONS = JSON.stringify(userOptions || {})
2936

3037
rawArgs.push('--config', require.resolve('./nightwatch.config.js'))
3138
if (rawArgs.indexOf('--env') === -1) {

0 commit comments

Comments
 (0)