From 8d16caa7eed92f0ddcbeb2246cee33489dea5518 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Sat, 8 Jun 2019 09:29:13 +0300 Subject: [PATCH 1/7] docs: changed plugins to store docs locally --- docs/.vuepress/config.js | 14 ++--- docs/core-plugins/README.md | 14 +++++ docs/core-plugins/pwa.md | 121 ++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 10 deletions(-) create mode 100644 docs/core-plugins/README.md create mode 100644 docs/core-plugins/pwa.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 29c529f169..8c2fa98330 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -83,16 +83,7 @@ module.exports = { }, { text: 'Plugins', - items: [ - { text: 'Babel', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel' }, - { text: 'TypeScript', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript' }, - { text: 'ESLint', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint' }, - { text: 'PWA', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa' }, - { text: 'Jest', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest' }, - { text: 'Mocha', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha' }, - { text: 'Cypress', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress' }, - { text: 'Nightwatch', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch' } - ] + link: '/core-plugins/' }, { text: 'Changelog', @@ -147,6 +138,9 @@ module.exports = { '/dev-guide/ui-localization.md' ] } + ], + '/core-plugins/': [ + '/core-plugins/pwa.md' ] } }, diff --git a/docs/core-plugins/README.md b/docs/core-plugins/README.md new file mode 100644 index 0000000000..10ff733c38 --- /dev/null +++ b/docs/core-plugins/README.md @@ -0,0 +1,14 @@ +# Plugins + +Vue CLI uses a plugin-based architecture. If you inspect a newly created project's `package.json`, you will find dependencies that start with `@vue/cli-plugin-`. Plugins can modify the internal webpack configuration and inject commands to `vue-cli-service`. Most of the features listed during the project creation process are implemented as plugins. + +This section contains documentation for core Vue CLI plugins: + +- Babel +- TypeScript +- ESLint +- [PWA](pwa.md) +- Jest +- Mocha +- Cypress +- Nightwatch diff --git a/docs/core-plugins/pwa.md b/docs/core-plugins/pwa.md new file mode 100644 index 0000000000..5e37055a08 --- /dev/null +++ b/docs/core-plugins/pwa.md @@ -0,0 +1,121 @@ +# @vue/cli-plugin-pwa + +> Progressive Web Application plugin for Vue CLI + +The service worker added with this plugin is only enabled in the production environment (e.g. only if you run `npm run build` or `yarn build`). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included. + +Instead, in the development mode the `noopServiceWorker.js` is included. This service worker file is effectively a 'no-op' that will reset any previous service worker registered for the same host:port combination. + +If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache. + +## Configuration + +Configuration is handled via the `pwa` property of either the `vue.config.js` file, or the `"vue"` field in `package.json`. + +- **pwa.workboxPluginMode** + + This allows you to the choose between the two modes supported by the underlying + [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). + + - `'GenerateSW'` (default), will lead to a new service worker file being created + each time you rebuild your web app. + + - `'InjectManifest'` allows you to start with an existing service worker file, + and creates a copy of that file with a "precache manifest" injected into it. + + The "[Which Plugin to Use?](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use)" + guide can help you choose between the two modes. + +- **pwa.workboxOptions** + + These options are passed on through to the underlying `workbox-webpack-plugin`. + + For more information on what values are supported, please see the guide for + [`GenerateSW`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config) + or for [`InjectManifest`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config). + +- **pwa.name** + + - Default: "name" field in `package.json` + + Used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML. Note you will need to edit `public/manifest.json` to match this. + +- **pwa.themeColor** + + - Default: `'#4DBA87'` + +- **pwa.msTileColor** + + - Default: `'#000000'` + +- **pwa.appleMobileWebAppCapable** + + - Default: `'no'` + + This defaults to `'no'` because iOS before 11.3 does not have proper PWA support. See [this article](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb) for more details. + +- **pwa.appleMobileWebAppStatusBarStyle** + + - Default: `'default'` + +- **pwa.assetsVersion** + + - Default: `''` + + This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append `?v=` to the URLs of the icons and manifest. + +- **pwa.manifestPath** + + - Default: `'manifest.json'` + + The path of app’s manifest. + +- **pwa.iconPaths** + + - Defaults: + + ```js + { + favicon32: 'img/icons/favicon-32x32.png', + favicon16: 'img/icons/favicon-16x16.png', + appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png', + maskIcon: 'img/icons/safari-pinned-tab.svg', + msTileImage: 'img/icons/msapplication-icon-144x144.png' + } + ``` + + Change these values to use different paths for your icons. + +### Example Configuration + +```js +// Inside vue.config.js +module.exports = { + // ...other vue-cli plugin options... + pwa: { + name: 'My App', + themeColor: '#4DBA87', + msTileColor: '#000000', + appleMobileWebAppCapable: 'yes', + appleMobileWebAppStatusBarStyle: 'black', + + // configure the workbox plugin + workboxPluginMode: 'InjectManifest', + workboxOptions: { + // swSrc is required in InjectManifest mode. + swSrc: 'dev/sw.js', + // ...other Workbox options... + } + } +} +``` + +## Installing in an Already Created Project + +``` sh +vue add @vue/pwa +``` + +## Injected webpack-chain Rules + +- `config.plugin('workbox')` From c098201502f8056a62ffe88c2a03f127e195c418 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 10 Jun 2019 10:09:50 +0200 Subject: [PATCH 2/7] docs: moved Babel plugin doc --- docs/.vuepress/config.js | 3 ++- docs/core-plugins/README.md | 2 +- docs/core-plugins/babel.md | 39 +++++++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 docs/core-plugins/babel.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 8c2fa98330..b698f8863c 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -140,7 +140,8 @@ module.exports = { } ], '/core-plugins/': [ - '/core-plugins/pwa.md' + '/core-plugins/pwa.md', + '/core-plugins/babel.md' ] } }, diff --git a/docs/core-plugins/README.md b/docs/core-plugins/README.md index 10ff733c38..806c05702c 100644 --- a/docs/core-plugins/README.md +++ b/docs/core-plugins/README.md @@ -4,7 +4,7 @@ Vue CLI uses a plugin-based architecture. If you inspect a newly created project This section contains documentation for core Vue CLI plugins: -- Babel +- [Babel](babel.md) - TypeScript - ESLint - [PWA](pwa.md) diff --git a/docs/core-plugins/babel.md b/docs/core-plugins/babel.md new file mode 100644 index 0000000000..e33ca103bb --- /dev/null +++ b/docs/core-plugins/babel.md @@ -0,0 +1,39 @@ +# @vue/cli-plugin-babel + +> Babel plugin for Vue CLI + +## Configuration + +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 `babel.config.js` to use any other Babel presets or plugins. + +By default, `babel-loader` excludes files inside `node_modules` dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the `transpileDependencies` option in `vue.config.js`: + +``` js +module.exports = { + transpileDependencies: [ + // can be string or regex + 'my-dep', + /other-dep/ + ] +} +``` + +## Caching + +[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`. + +## Parallelization + +[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`. + +## Installing in an Already Created Project + +``` sh +vue add @vue/babel +``` + +## Injected webpack-chain Rules + +- `config.rule('js')` +- `config.rule('js').use('babel-loader')` +- `config.rule('js').use('cache-loader')` From af18c831cc5f3eff0ab430b49d0465f6063b3505 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 10 Jun 2019 11:18:10 +0200 Subject: [PATCH 3/7] docs: moved all plugins to docs website --- docs/.vuepress/config.js | 19 +++++++-- docs/core-plugins/README.md | 12 +++--- docs/core-plugins/cypress.md | 48 ++++++++++++++++++++++ docs/core-plugins/eslint.md | 72 +++++++++++++++++++++++++++++++++ docs/core-plugins/jest.md | 70 ++++++++++++++++++++++++++++++++ docs/core-plugins/mocha.md | 36 +++++++++++++++++ docs/core-plugins/nightwatch.md | 37 +++++++++++++++++ docs/core-plugins/typescript.md | 39 ++++++++++++++++++ 8 files changed, 323 insertions(+), 10 deletions(-) create mode 100644 docs/core-plugins/cypress.md create mode 100644 docs/core-plugins/eslint.md create mode 100644 docs/core-plugins/jest.md create mode 100644 docs/core-plugins/mocha.md create mode 100644 docs/core-plugins/nightwatch.md create mode 100644 docs/core-plugins/typescript.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index b698f8863c..c19de82f2f 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -139,10 +139,21 @@ module.exports = { ] } ], - '/core-plugins/': [ - '/core-plugins/pwa.md', - '/core-plugins/babel.md' - ] + '/core-plugins/': [{ + title: 'Core Vue CLI Plugins', + collapsable: false, + children: [ + '/core-plugins/babel.md', + '/core-plugins/typescript.md', + '/core-plugins/eslint.md', + '/core-plugins/pwa.md', + '/core-plugins/jest.md', + '/core-plugins/mocha.md', + '/core-plugins/cypress.md', + '/core-plugins/nightwatch.md' + ] + }], + } }, '/zh/': { diff --git a/docs/core-plugins/README.md b/docs/core-plugins/README.md index 806c05702c..dcbec8ed89 100644 --- a/docs/core-plugins/README.md +++ b/docs/core-plugins/README.md @@ -5,10 +5,10 @@ Vue CLI uses a plugin-based architecture. If you inspect a newly created project This section contains documentation for core Vue CLI plugins: - [Babel](babel.md) -- TypeScript -- ESLint +- [TypeScript](typescript.md) +- [ESLint](eslint.md) - [PWA](pwa.md) -- Jest -- Mocha -- Cypress -- Nightwatch +- [Jest](jest.md) +- [Mocha](mocha.md) +- [Cypress](cypress.md) +- [Nightwatch](nightwatch.md) diff --git a/docs/core-plugins/cypress.md b/docs/core-plugins/cypress.md new file mode 100644 index 0000000000..4199197339 --- /dev/null +++ b/docs/core-plugins/cypress.md @@ -0,0 +1,48 @@ +# @vue/cli-plugin-e2e-cypress + +> e2e-cypress plugin for Vue CLI + +This adds E2E testing support using [Cypress](https://www.cypress.io/). + +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). + +## Injected Commands + +- **`vue-cli-service test:e2e`** + + Run e2e tests with `cypress run`. + + By default it launches Cypress in interactive mode with a GUI. If you want to run the tests in headless mode (e.g. for CI), you can do so with the `--headless` option. + + The command 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. + + Options: + + ``` + --headless run in headless mode without GUI + --mode specify the mode the dev server should run in. (default: production) + --url run e2e tests against given url instead of auto-starting dev server + -s, --spec (headless only) runs a specific spec file. defaults to "all" + ``` + + Additionally: + + - In GUI mode, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open); + - In `--headless` mode, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). + + Examples : + - Run Cypress in headless mode for a specific file: `vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js` + +## Configuration + +We've pre-configured Cypress to place most of the e2e testing related files under `/tests/e2e`. You can also check out [how to configure Cypress via `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options). + +## Environment Variables + +Cypress doesn't load .env files for your test files the same way as `vue-cli` does for your [application code](https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code). Cypress supports a few ways to [define env variables](https://docs.cypress.io/guides/guides/environment-variables.html#) but the easiest one is to use .json files (either `cypress.json` or `cypress.env.json`) to define environment variables. Keep in mind those variables are accessible via `Cypress.env` function instead of regular `process.env` object. + +## Installing in an Already Created Project + +``` sh +vue add @vue/e2e-cypress +``` diff --git a/docs/core-plugins/eslint.md b/docs/core-plugins/eslint.md new file mode 100644 index 0000000000..e9b5cddeed --- /dev/null +++ b/docs/core-plugins/eslint.md @@ -0,0 +1,72 @@ +# @vue/cli-plugin-eslint + +> ESLint plugin for Vue CLI + +## Injected Commands + +- **`vue-cli-service lint`** + + ``` + Usage: vue-cli-service lint [options] [...files] + + Options: + + --format [formatter] specify formatter (default: codeframe) + --no-fix do not fix errors + --max-errors specify number of errors to make build failed (default: 0) + --max-warnings specify number of warnings to make build failed (default: Infinity) + ``` + + Lints and fixes files. If no specific files are given, it lints all files in `src` and `test`. + + Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported. + +## Configuration + +ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`. + +Lint-on-save during development with `eslint-loader` is enabled by default. It can be disabled with the `lintOnSave` option in `vue.config.js`: + +``` js +module.exports = { + lintOnSave: false +} +``` + +When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation. + +To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail. + +Alternatively, you can configure the overlay to display both warnings and errors: + +``` js +// vue.config.js +module.exports = { + devServer: { + overlay: { + warnings: true, + errors: true + } + } +} +``` + +When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config: + +``` js +// vue.config.js +module.exports = { + lintOnSave: process.env.NODE_ENV !== 'production' +} +``` + +## Installing in an Already Created Project + +``` sh +vue add @vue/eslint +``` + +## Injected webpack-chain Rules + +- `config.module.rule('eslint')` +- `config.module.rule('eslint').use('eslint-loader')` diff --git a/docs/core-plugins/jest.md b/docs/core-plugins/jest.md new file mode 100644 index 0000000000..aaa335f8dc --- /dev/null +++ b/docs/core-plugins/jest.md @@ -0,0 +1,70 @@ +# @vue/cli-plugin-unit-jest + +> unit-jest plugin for Vue CLI + +## Injected Commands + +- **`vue-cli-service test:unit`** + + Run unit tests with Jest. Default `testMatch` is `/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))` which matches: + + - Any files in `tests/unit` that end in `.spec.(js|jsx|ts|tsx)`; + - Any js(x)/ts(x) files inside `__tests__` directories. + + Usage: `vue-cli-service test:unit [options] ` + + All [Jest command line options](https://facebook.github.io/jest/docs/en/cli.html) are also supported. + +## Debugging Tests + +Note that directly running `jest` will fail because the Babel preset requires hints to make your code work in Node.js, so you must run your tests with `vue-cli-service test:unit`. + +If you want to debug your tests via the Node inspector, you can run the following: + +```sh +# macOS or linux +node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit + +# Windows +node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit +``` + +## Configuration + +Jest can be configured via `jest.config.js` in your project root, or the `jest` field in `package.json`. + +## Installing in an Already Created Project + +```sh +vue add @vue/unit-jest +``` + +## Transform dependencies from `/node_modules` + +By default, jest doesn't transform anything from `/node_modules`. + +Since jest runs in node, we also don't have to transpile anything that uses modern ECMAScript features as Node >=8 already supports these features, so it's a sensible default. cli-plugin-jest also doesn't respect the `transpileDependencies` option in `vue.config.js` for the same reason. + +However, we have (at least) three cases where we do need to transpile code from `/node_modules` in jest: + +1. Usage of ES6 `import`/`export` statements, which have to be compiled to commonjs `module.exports` +2. Single File Components (`.vue` files) which have to be run through `vue-jest` +3. Typescript code + +To do this, we need to add an exception to the `transformIgnorePatterns` option of jest. This is its default value: + +```javascript +transformIgnorePatterns: ['/node_modules/'] +``` + +We have to add exceptions to this pattern with a RegExp negative lookahead: + +```javascript +transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)'] +``` + +To exclude multiple libraries: + +```javascript +transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)'] +``` diff --git a/docs/core-plugins/mocha.md b/docs/core-plugins/mocha.md new file mode 100644 index 0000000000..cc840d14f3 --- /dev/null +++ b/docs/core-plugins/mocha.md @@ -0,0 +1,36 @@ +# @vue/cli-plugin-unit-mocha + +> unit-mocha plugin for Vue CLI + +## Injected Commands + +- **`vue-cli-service test:unit`** + + Run unit tests with [mocha-webpack](https://github.com/zinserjan/mocha-webpack) + [chai](http://chaijs.com/). + + **Note the tests are run inside Node.js with browser environment simulated with JSDOM.** + + ``` + Usage: vue-cli-service test:unit [options] [...files] + + Options: + + --watch, -w run in watch mode + --grep, -g only run tests matching + --slow, -s "slow" test threshold in milliseconds + --timeout, -t timeout threshold in milliseconds + --bail, -b bail after first test failure + --require, -r require the given module before running tests + --include include the given module into test bundle + --inspect-brk Enable inspector to debug the tests + ``` + + Default files matches are: any files in `tests/unit` that end in `.spec.(ts|js)`. + + All [mocha-webpack command line options](http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html) are also supported. + +## Installing in an Already Created Project + +``` sh +vue add @vue/unit-mocha +``` diff --git a/docs/core-plugins/nightwatch.md b/docs/core-plugins/nightwatch.md new file mode 100644 index 0000000000..785048d27c --- /dev/null +++ b/docs/core-plugins/nightwatch.md @@ -0,0 +1,37 @@ +# @vue/cli-plugin-e2e-nightwatch + +> e2e-nightwatch plugin for Vue CLI + +## Injected Commands + +- **`vue-cli-service test:e2e`** + + run e2e tests with [NightwatchJS](http://nightwatchjs.org). + + Options: + + ``` + --url run e2e tests against given url instead of auto-starting dev server + --config use custom nightwatch config file (overrides internals) + -e, --env specify comma-delimited browser envs to run in (default: chrome) + -t, --test specify a test to run by name + -f, --filter glob to filter tests by filename + ``` + + > Note: this plugin currently uses Nightwatch v0.9.x. We are waiting for Nightwatch 1.0 to stabilize before upgrading. + + Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js). + +## Configuration + +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). + +Alternatively, you can completely replace the internal config with a custom config file using the `--config` option. + +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). + +## Installing in an Already Created Project + +``` sh +vue add @vue/e2e-nightwatch +``` diff --git a/docs/core-plugins/typescript.md b/docs/core-plugins/typescript.md new file mode 100644 index 0000000000..cc93cefbe3 --- /dev/null +++ b/docs/core-plugins/typescript.md @@ -0,0 +1,39 @@ +# @vue/cli-plugin-typescript + +> TypeScript plugin for Vue CLI + +Uses TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for faster off-thread type checking. + +## Configuration + +TypeScript can be configured via `tsconfig.json`. + +Since `3.0.0-rc.6`, `typescript` is now a peer dependency of this package, so you can use a specific version of TypeScript by updating your project's `package.json`. + +This plugin can be used alongside `@vue/cli-plugin-babel`. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets. + +## Injected Commands + +If opted to use [TSLint](https://palantir.github.io/tslint/) during project creation, `vue-cli-service lint` will be injected. + +## Caching + +[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/ts-loader`. + +## Parallelization + +[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`. + +## Installing in an Already Created Project + +``` sh +vue add @vue/typescript +``` + +## Injected webpack-chain Rules + +- `config.rule('ts')` +- `config.rule('ts').use('ts-loader')` +- `config.rule('ts').use('babel-loader')` (when used alongside `@vue/cli-plugin-babel`) +- `config.rule('ts').use('cache-loader')` +- `config.plugin('fork-ts-checker')` From 3ccc64feb38f96254bb020829adc09de1c382723 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 11 Jun 2019 14:04:21 +0200 Subject: [PATCH 4/7] docs: created a script to generate docs --- docs/.vuepress/config.js | 8 ++++---- docs/core-plugins/README.md | 8 ++++---- docs/core-plugins/babel.md | 2 +- .../{cypress.md => e2e-cypress.md} | 4 ++-- .../{nightwatch.md => e2e-nightwatch.md} | 2 +- docs/core-plugins/eslint.md | 2 +- docs/core-plugins/pwa.md | 18 ++++++++++++++++-- docs/core-plugins/typescript.md | 2 +- docs/core-plugins/{jest.md => unit-jest.md} | 2 +- docs/core-plugins/{mocha.md => unit-mocha.md} | 2 +- package.json | 3 ++- scripts/genDocs.js | 18 ++++++++++++++++++ 12 files changed, 52 insertions(+), 19 deletions(-) rename docs/core-plugins/{cypress.md => e2e-cypress.md} (98%) rename docs/core-plugins/{nightwatch.md => e2e-nightwatch.md} (97%) rename docs/core-plugins/{jest.md => unit-jest.md} (98%) rename docs/core-plugins/{mocha.md => unit-mocha.md} (97%) create mode 100644 scripts/genDocs.js diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index c19de82f2f..b0c6d276ed 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -147,10 +147,10 @@ module.exports = { '/core-plugins/typescript.md', '/core-plugins/eslint.md', '/core-plugins/pwa.md', - '/core-plugins/jest.md', - '/core-plugins/mocha.md', - '/core-plugins/cypress.md', - '/core-plugins/nightwatch.md' + '/core-plugins/unit-jest.md', + '/core-plugins/unit-mocha.md', + '/core-plugins/e2e-cypress.md', + '/core-plugins/e2e-nightwatch.md' ] }], diff --git a/docs/core-plugins/README.md b/docs/core-plugins/README.md index dcbec8ed89..1d62026f55 100644 --- a/docs/core-plugins/README.md +++ b/docs/core-plugins/README.md @@ -8,7 +8,7 @@ This section contains documentation for core Vue CLI plugins: - [TypeScript](typescript.md) - [ESLint](eslint.md) - [PWA](pwa.md) -- [Jest](jest.md) -- [Mocha](mocha.md) -- [Cypress](cypress.md) -- [Nightwatch](nightwatch.md) +- [Jest](unit-jest.md) +- [Mocha](unit-mocha.md) +- [Cypress](e2e-cypress.md) +- [Nightwatch](e2e-nightwatch.md) diff --git a/docs/core-plugins/babel.md b/docs/core-plugins/babel.md index e33ca103bb..4bd37521af 100644 --- a/docs/core-plugins/babel.md +++ b/docs/core-plugins/babel.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-babel -> Babel plugin for Vue CLI +> babel plugin for vue-cli ## Configuration diff --git a/docs/core-plugins/cypress.md b/docs/core-plugins/e2e-cypress.md similarity index 98% rename from docs/core-plugins/cypress.md rename to docs/core-plugins/e2e-cypress.md index 4199197339..e5e963a92c 100644 --- a/docs/core-plugins/cypress.md +++ b/docs/core-plugins/e2e-cypress.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-e2e-cypress -> e2e-cypress plugin for Vue CLI +> e2e-cypress plugin for vue-cli This adds E2E testing support using [Cypress](https://www.cypress.io/). @@ -29,7 +29,7 @@ Cypress offers a rich interactive interface for running E2E tests, but currently - In GUI mode, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open); - In `--headless` mode, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). - + Examples : - Run Cypress in headless mode for a specific file: `vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js` diff --git a/docs/core-plugins/nightwatch.md b/docs/core-plugins/e2e-nightwatch.md similarity index 97% rename from docs/core-plugins/nightwatch.md rename to docs/core-plugins/e2e-nightwatch.md index 785048d27c..bbced35a28 100644 --- a/docs/core-plugins/nightwatch.md +++ b/docs/core-plugins/e2e-nightwatch.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-e2e-nightwatch -> e2e-nightwatch plugin for Vue CLI +> e2e-nightwatch plugin for vue-cli ## Injected Commands diff --git a/docs/core-plugins/eslint.md b/docs/core-plugins/eslint.md index e9b5cddeed..fb07db7150 100644 --- a/docs/core-plugins/eslint.md +++ b/docs/core-plugins/eslint.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-eslint -> ESLint plugin for Vue CLI +> eslint plugin for vue-cli ## Injected Commands diff --git a/docs/core-plugins/pwa.md b/docs/core-plugins/pwa.md index 5e37055a08..51c46b7098 100644 --- a/docs/core-plugins/pwa.md +++ b/docs/core-plugins/pwa.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-pwa -> Progressive Web Application plugin for Vue CLI +> pwa plugin for vue-cli The service worker added with this plugin is only enabled in the production environment (e.g. only if you run `npm run build` or `yarn build`). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included. @@ -10,7 +10,8 @@ If you need to test a service worker locally, build the application and run a si ## Configuration -Configuration is handled via the `pwa` property of either the `vue.config.js` file, or the `"vue"` field in `package.json`. +Configuration is handled via the `pwa` property of either the `vue.config.js` +file, or the `"vue"` field in `package.json`. - **pwa.workboxPluginMode** @@ -70,6 +71,19 @@ Configuration is handled via the `pwa` property of either the `vue.config.js` fi The path of app’s manifest. +- **pwa.manifestOptions** + + - Default: `{}` + + The object will be used to generate the `manifest.json` + + If the following attributes are not defined in the object, the options of `pwa` or default options will be used instead. + - name: `pwa.name` + - short_name: `pwa.name` + - start_url: `'.'` + - display: `'standalone'` + - theme_color: `pwa.themeColor` + - **pwa.iconPaths** - Defaults: diff --git a/docs/core-plugins/typescript.md b/docs/core-plugins/typescript.md index cc93cefbe3..dedbbbcbb0 100644 --- a/docs/core-plugins/typescript.md +++ b/docs/core-plugins/typescript.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-typescript -> TypeScript plugin for Vue CLI +> typescript plugin for vue-cli Uses TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for faster off-thread type checking. diff --git a/docs/core-plugins/jest.md b/docs/core-plugins/unit-jest.md similarity index 98% rename from docs/core-plugins/jest.md rename to docs/core-plugins/unit-jest.md index aaa335f8dc..7aabbbd547 100644 --- a/docs/core-plugins/jest.md +++ b/docs/core-plugins/unit-jest.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-unit-jest -> unit-jest plugin for Vue CLI +> unit-jest plugin for vue-cli ## Injected Commands diff --git a/docs/core-plugins/mocha.md b/docs/core-plugins/unit-mocha.md similarity index 97% rename from docs/core-plugins/mocha.md rename to docs/core-plugins/unit-mocha.md index cc840d14f3..f1bb0ca706 100644 --- a/docs/core-plugins/mocha.md +++ b/docs/core-plugins/unit-mocha.md @@ -1,6 +1,6 @@ # @vue/cli-plugin-unit-mocha -> unit-mocha plugin for Vue CLI +> unit-mocha plugin for vue-cli ## Injected Commands diff --git a/package.json b/package.json index aeb46fbd60..03e301e628 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "version": "node scripts/genChangelog.js && git add CHANGELOG.md", "docs": "vuepress dev docs", "docs:build": "vuepress build docs", - "patch-chromedriver": "node scripts/patchChromedriver.js" + "patch-chromedriver": "node scripts/patchChromedriver.js", + "gen-docs": "node scripts/genDocs.js" }, "gitHooks": { "pre-commit": "lint-staged", diff --git a/scripts/genDocs.js b/scripts/genDocs.js new file mode 100644 index 0000000000..16c0fd1c9c --- /dev/null +++ b/scripts/genDocs.js @@ -0,0 +1,18 @@ +const fs = require('fs') +const path = require('path') + +const plugins = ['babel', 'e2e-cypress', 'e2e-nightwatch', 'eslint', 'pwa', 'typescript', 'unit-jest', 'unit-mocha'] + +const genDocs = (module.exports = async () => { + plugins.forEach(plugin => { + const entryPath = path.resolve(__dirname, '../packages', '@vue', `cli-plugin-${plugin}`, 'README.md') + const entryContent = fs.readFileSync(entryPath) + const docPath = path.resolve(__dirname, '../docs', 'core-plugins', `${plugin}.md`) + fs.writeFile(docPath, entryContent, () => {}) + }) +}) + +genDocs().catch(err => { + console.error(err) + process.exit(1) +}) From 7a79247997e924cab001f823fb4f195cf91e2fc0 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 11 Jun 2019 22:54:54 +0300 Subject: [PATCH 5/7] docs: removed hardcoded plugins list --- scripts/genDocs.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/scripts/genDocs.js b/scripts/genDocs.js index 16c0fd1c9c..6f387d8893 100644 --- a/scripts/genDocs.js +++ b/scripts/genDocs.js @@ -1,14 +1,23 @@ const fs = require('fs') const path = require('path') -const plugins = ['babel', 'e2e-cypress', 'e2e-nightwatch', 'eslint', 'pwa', 'typescript', 'unit-jest', 'unit-mocha'] +const pluginsDirPath = path.resolve(__dirname, '../packages', '@vue') +const pluginRegEx = new RegExp('cli-plugin-') + +function generatePluginDoc (plugin) { + const entryPath = path.resolve(__dirname, '../packages', '@vue', plugin, 'README.md') + const entryContent = fs.readFileSync(entryPath) + const docPath = path.resolve(__dirname, '../docs', 'core-plugins', `${plugin.replace('cli-plugin-', '')}.md`) + fs.writeFile(docPath, entryContent, () => { }) +} const genDocs = (module.exports = async () => { - plugins.forEach(plugin => { - const entryPath = path.resolve(__dirname, '../packages', '@vue', `cli-plugin-${plugin}`, 'README.md') - const entryContent = fs.readFileSync(entryPath) - const docPath = path.resolve(__dirname, '../docs', 'core-plugins', `${plugin}.md`) - fs.writeFile(docPath, entryContent, () => {}) + fs.readdir(pluginsDirPath, (_, files) => { + files.forEach(file => { + if (pluginRegEx.test(file)) { + generatePluginDoc(file) + } + }) }) }) From 854e95359f02b5041b9b0bbbf0f544c1cf0db544 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Wed, 12 Jun 2019 05:29:01 +0300 Subject: [PATCH 6/7] docs: removed plugins docs for test --- docs/core-plugins/babel.md | 39 -------- docs/core-plugins/e2e-cypress.md | 48 ---------- docs/core-plugins/e2e-nightwatch.md | 37 -------- docs/core-plugins/eslint.md | 72 --------------- docs/core-plugins/pwa.md | 135 ---------------------------- docs/core-plugins/typescript.md | 39 -------- docs/core-plugins/unit-jest.md | 70 --------------- docs/core-plugins/unit-mocha.md | 36 -------- package.json | 5 +- 9 files changed, 2 insertions(+), 479 deletions(-) delete mode 100644 docs/core-plugins/babel.md delete mode 100644 docs/core-plugins/e2e-cypress.md delete mode 100644 docs/core-plugins/e2e-nightwatch.md delete mode 100644 docs/core-plugins/eslint.md delete mode 100644 docs/core-plugins/pwa.md delete mode 100644 docs/core-plugins/typescript.md delete mode 100644 docs/core-plugins/unit-jest.md delete mode 100644 docs/core-plugins/unit-mocha.md diff --git a/docs/core-plugins/babel.md b/docs/core-plugins/babel.md deleted file mode 100644 index 4bd37521af..0000000000 --- a/docs/core-plugins/babel.md +++ /dev/null @@ -1,39 +0,0 @@ -# @vue/cli-plugin-babel - -> babel plugin for vue-cli - -## Configuration - -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 `babel.config.js` to use any other Babel presets or plugins. - -By default, `babel-loader` excludes files inside `node_modules` dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the `transpileDependencies` option in `vue.config.js`: - -``` js -module.exports = { - transpileDependencies: [ - // can be string or regex - 'my-dep', - /other-dep/ - ] -} -``` - -## Caching - -[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`. - -## Parallelization - -[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`. - -## Installing in an Already Created Project - -``` sh -vue add @vue/babel -``` - -## Injected webpack-chain Rules - -- `config.rule('js')` -- `config.rule('js').use('babel-loader')` -- `config.rule('js').use('cache-loader')` diff --git a/docs/core-plugins/e2e-cypress.md b/docs/core-plugins/e2e-cypress.md deleted file mode 100644 index e5e963a92c..0000000000 --- a/docs/core-plugins/e2e-cypress.md +++ /dev/null @@ -1,48 +0,0 @@ -# @vue/cli-plugin-e2e-cypress - -> e2e-cypress plugin for vue-cli - -This adds E2E testing support using [Cypress](https://www.cypress.io/). - -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). - -## Injected Commands - -- **`vue-cli-service test:e2e`** - - Run e2e tests with `cypress run`. - - By default it launches Cypress in interactive mode with a GUI. If you want to run the tests in headless mode (e.g. for CI), you can do so with the `--headless` option. - - The command 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. - - Options: - - ``` - --headless run in headless mode without GUI - --mode specify the mode the dev server should run in. (default: production) - --url run e2e tests against given url instead of auto-starting dev server - -s, --spec (headless only) runs a specific spec file. defaults to "all" - ``` - - Additionally: - - - In GUI mode, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open); - - In `--headless` mode, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). - - Examples : - - Run Cypress in headless mode for a specific file: `vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js` - -## Configuration - -We've pre-configured Cypress to place most of the e2e testing related files under `/tests/e2e`. You can also check out [how to configure Cypress via `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options). - -## Environment Variables - -Cypress doesn't load .env files for your test files the same way as `vue-cli` does for your [application code](https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code). Cypress supports a few ways to [define env variables](https://docs.cypress.io/guides/guides/environment-variables.html#) but the easiest one is to use .json files (either `cypress.json` or `cypress.env.json`) to define environment variables. Keep in mind those variables are accessible via `Cypress.env` function instead of regular `process.env` object. - -## Installing in an Already Created Project - -``` sh -vue add @vue/e2e-cypress -``` diff --git a/docs/core-plugins/e2e-nightwatch.md b/docs/core-plugins/e2e-nightwatch.md deleted file mode 100644 index bbced35a28..0000000000 --- a/docs/core-plugins/e2e-nightwatch.md +++ /dev/null @@ -1,37 +0,0 @@ -# @vue/cli-plugin-e2e-nightwatch - -> e2e-nightwatch plugin for vue-cli - -## Injected Commands - -- **`vue-cli-service test:e2e`** - - run e2e tests with [NightwatchJS](http://nightwatchjs.org). - - Options: - - ``` - --url run e2e tests against given url instead of auto-starting dev server - --config use custom nightwatch config file (overrides internals) - -e, --env specify comma-delimited browser envs to run in (default: chrome) - -t, --test specify a test to run by name - -f, --filter glob to filter tests by filename - ``` - - > Note: this plugin currently uses Nightwatch v0.9.x. We are waiting for Nightwatch 1.0 to stabilize before upgrading. - - Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js). - -## Configuration - -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). - -Alternatively, you can completely replace the internal config with a custom config file using the `--config` option. - -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). - -## Installing in an Already Created Project - -``` sh -vue add @vue/e2e-nightwatch -``` diff --git a/docs/core-plugins/eslint.md b/docs/core-plugins/eslint.md deleted file mode 100644 index fb07db7150..0000000000 --- a/docs/core-plugins/eslint.md +++ /dev/null @@ -1,72 +0,0 @@ -# @vue/cli-plugin-eslint - -> eslint plugin for vue-cli - -## Injected Commands - -- **`vue-cli-service lint`** - - ``` - Usage: vue-cli-service lint [options] [...files] - - Options: - - --format [formatter] specify formatter (default: codeframe) - --no-fix do not fix errors - --max-errors specify number of errors to make build failed (default: 0) - --max-warnings specify number of warnings to make build failed (default: Infinity) - ``` - - Lints and fixes files. If no specific files are given, it lints all files in `src` and `test`. - - Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported. - -## Configuration - -ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`. - -Lint-on-save during development with `eslint-loader` is enabled by default. It can be disabled with the `lintOnSave` option in `vue.config.js`: - -``` js -module.exports = { - lintOnSave: false -} -``` - -When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation. - -To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail. - -Alternatively, you can configure the overlay to display both warnings and errors: - -``` js -// vue.config.js -module.exports = { - devServer: { - overlay: { - warnings: true, - errors: true - } - } -} -``` - -When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config: - -``` js -// vue.config.js -module.exports = { - lintOnSave: process.env.NODE_ENV !== 'production' -} -``` - -## Installing in an Already Created Project - -``` sh -vue add @vue/eslint -``` - -## Injected webpack-chain Rules - -- `config.module.rule('eslint')` -- `config.module.rule('eslint').use('eslint-loader')` diff --git a/docs/core-plugins/pwa.md b/docs/core-plugins/pwa.md deleted file mode 100644 index 51c46b7098..0000000000 --- a/docs/core-plugins/pwa.md +++ /dev/null @@ -1,135 +0,0 @@ -# @vue/cli-plugin-pwa - -> pwa plugin for vue-cli - -The service worker added with this plugin is only enabled in the production environment (e.g. only if you run `npm run build` or `yarn build`). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included. - -Instead, in the development mode the `noopServiceWorker.js` is included. This service worker file is effectively a 'no-op' that will reset any previous service worker registered for the same host:port combination. - -If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache. - -## Configuration - -Configuration is handled via the `pwa` property of either the `vue.config.js` -file, or the `"vue"` field in `package.json`. - -- **pwa.workboxPluginMode** - - This allows you to the choose between the two modes supported by the underlying - [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). - - - `'GenerateSW'` (default), will lead to a new service worker file being created - each time you rebuild your web app. - - - `'InjectManifest'` allows you to start with an existing service worker file, - and creates a copy of that file with a "precache manifest" injected into it. - - The "[Which Plugin to Use?](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use)" - guide can help you choose between the two modes. - -- **pwa.workboxOptions** - - These options are passed on through to the underlying `workbox-webpack-plugin`. - - For more information on what values are supported, please see the guide for - [`GenerateSW`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config) - or for [`InjectManifest`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config). - -- **pwa.name** - - - Default: "name" field in `package.json` - - Used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML. Note you will need to edit `public/manifest.json` to match this. - -- **pwa.themeColor** - - - Default: `'#4DBA87'` - -- **pwa.msTileColor** - - - Default: `'#000000'` - -- **pwa.appleMobileWebAppCapable** - - - Default: `'no'` - - This defaults to `'no'` because iOS before 11.3 does not have proper PWA support. See [this article](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb) for more details. - -- **pwa.appleMobileWebAppStatusBarStyle** - - - Default: `'default'` - -- **pwa.assetsVersion** - - - Default: `''` - - This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append `?v=` to the URLs of the icons and manifest. - -- **pwa.manifestPath** - - - Default: `'manifest.json'` - - The path of app’s manifest. - -- **pwa.manifestOptions** - - - Default: `{}` - - The object will be used to generate the `manifest.json` - - If the following attributes are not defined in the object, the options of `pwa` or default options will be used instead. - - name: `pwa.name` - - short_name: `pwa.name` - - start_url: `'.'` - - display: `'standalone'` - - theme_color: `pwa.themeColor` - -- **pwa.iconPaths** - - - Defaults: - - ```js - { - favicon32: 'img/icons/favicon-32x32.png', - favicon16: 'img/icons/favicon-16x16.png', - appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png', - maskIcon: 'img/icons/safari-pinned-tab.svg', - msTileImage: 'img/icons/msapplication-icon-144x144.png' - } - ``` - - Change these values to use different paths for your icons. - -### Example Configuration - -```js -// Inside vue.config.js -module.exports = { - // ...other vue-cli plugin options... - pwa: { - name: 'My App', - themeColor: '#4DBA87', - msTileColor: '#000000', - appleMobileWebAppCapable: 'yes', - appleMobileWebAppStatusBarStyle: 'black', - - // configure the workbox plugin - workboxPluginMode: 'InjectManifest', - workboxOptions: { - // swSrc is required in InjectManifest mode. - swSrc: 'dev/sw.js', - // ...other Workbox options... - } - } -} -``` - -## Installing in an Already Created Project - -``` sh -vue add @vue/pwa -``` - -## Injected webpack-chain Rules - -- `config.plugin('workbox')` diff --git a/docs/core-plugins/typescript.md b/docs/core-plugins/typescript.md deleted file mode 100644 index dedbbbcbb0..0000000000 --- a/docs/core-plugins/typescript.md +++ /dev/null @@ -1,39 +0,0 @@ -# @vue/cli-plugin-typescript - -> typescript plugin for vue-cli - -Uses TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for faster off-thread type checking. - -## Configuration - -TypeScript can be configured via `tsconfig.json`. - -Since `3.0.0-rc.6`, `typescript` is now a peer dependency of this package, so you can use a specific version of TypeScript by updating your project's `package.json`. - -This plugin can be used alongside `@vue/cli-plugin-babel`. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets. - -## Injected Commands - -If opted to use [TSLint](https://palantir.github.io/tslint/) during project creation, `vue-cli-service lint` will be injected. - -## Caching - -[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/ts-loader`. - -## Parallelization - -[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`. - -## Installing in an Already Created Project - -``` sh -vue add @vue/typescript -``` - -## Injected webpack-chain Rules - -- `config.rule('ts')` -- `config.rule('ts').use('ts-loader')` -- `config.rule('ts').use('babel-loader')` (when used alongside `@vue/cli-plugin-babel`) -- `config.rule('ts').use('cache-loader')` -- `config.plugin('fork-ts-checker')` diff --git a/docs/core-plugins/unit-jest.md b/docs/core-plugins/unit-jest.md deleted file mode 100644 index 7aabbbd547..0000000000 --- a/docs/core-plugins/unit-jest.md +++ /dev/null @@ -1,70 +0,0 @@ -# @vue/cli-plugin-unit-jest - -> unit-jest plugin for vue-cli - -## Injected Commands - -- **`vue-cli-service test:unit`** - - Run unit tests with Jest. Default `testMatch` is `/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))` which matches: - - - Any files in `tests/unit` that end in `.spec.(js|jsx|ts|tsx)`; - - Any js(x)/ts(x) files inside `__tests__` directories. - - Usage: `vue-cli-service test:unit [options] ` - - All [Jest command line options](https://facebook.github.io/jest/docs/en/cli.html) are also supported. - -## Debugging Tests - -Note that directly running `jest` will fail because the Babel preset requires hints to make your code work in Node.js, so you must run your tests with `vue-cli-service test:unit`. - -If you want to debug your tests via the Node inspector, you can run the following: - -```sh -# macOS or linux -node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit - -# Windows -node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit -``` - -## Configuration - -Jest can be configured via `jest.config.js` in your project root, or the `jest` field in `package.json`. - -## Installing in an Already Created Project - -```sh -vue add @vue/unit-jest -``` - -## Transform dependencies from `/node_modules` - -By default, jest doesn't transform anything from `/node_modules`. - -Since jest runs in node, we also don't have to transpile anything that uses modern ECMAScript features as Node >=8 already supports these features, so it's a sensible default. cli-plugin-jest also doesn't respect the `transpileDependencies` option in `vue.config.js` for the same reason. - -However, we have (at least) three cases where we do need to transpile code from `/node_modules` in jest: - -1. Usage of ES6 `import`/`export` statements, which have to be compiled to commonjs `module.exports` -2. Single File Components (`.vue` files) which have to be run through `vue-jest` -3. Typescript code - -To do this, we need to add an exception to the `transformIgnorePatterns` option of jest. This is its default value: - -```javascript -transformIgnorePatterns: ['/node_modules/'] -``` - -We have to add exceptions to this pattern with a RegExp negative lookahead: - -```javascript -transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)'] -``` - -To exclude multiple libraries: - -```javascript -transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)'] -``` diff --git a/docs/core-plugins/unit-mocha.md b/docs/core-plugins/unit-mocha.md deleted file mode 100644 index f1bb0ca706..0000000000 --- a/docs/core-plugins/unit-mocha.md +++ /dev/null @@ -1,36 +0,0 @@ -# @vue/cli-plugin-unit-mocha - -> unit-mocha plugin for vue-cli - -## Injected Commands - -- **`vue-cli-service test:unit`** - - Run unit tests with [mocha-webpack](https://github.com/zinserjan/mocha-webpack) + [chai](http://chaijs.com/). - - **Note the tests are run inside Node.js with browser environment simulated with JSDOM.** - - ``` - Usage: vue-cli-service test:unit [options] [...files] - - Options: - - --watch, -w run in watch mode - --grep, -g only run tests matching - --slow, -s "slow" test threshold in milliseconds - --timeout, -t timeout threshold in milliseconds - --bail, -b bail after first test failure - --require, -r require the given module before running tests - --include include the given module into test bundle - --inspect-brk Enable inspector to debug the tests - ``` - - Default files matches are: any files in `tests/unit` that end in `.spec.(ts|js)`. - - All [mocha-webpack command line options](http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html) are also supported. - -## Installing in an Already Created Project - -``` sh -vue add @vue/unit-mocha -``` diff --git a/package.json b/package.json index 03e301e628..69d1bf0eb1 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,10 @@ "sync": "node scripts/syncDeps.js", "boot": "node scripts/bootstrap.js", "release": "yarn --pure-lockfile && yarn clean && node scripts/release.js", - "version": "node scripts/genChangelog.js && git add CHANGELOG.md", + "version": "node scripts/genChangelog.js && node scripts/genDocs.js && git add CHANGELOG.md && git add docs", "docs": "vuepress dev docs", "docs:build": "vuepress build docs", - "patch-chromedriver": "node scripts/patchChromedriver.js", - "gen-docs": "node scripts/genDocs.js" + "patch-chromedriver": "node scripts/patchChromedriver.js" }, "gitHooks": { "pre-commit": "lint-staged", From e8c7067cce6a47000a6efce12b84b129b2ec3241 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Wed, 12 Jun 2019 05:39:44 +0300 Subject: [PATCH 7/7] docs: regenerated plugins docs --- docs/core-plugins/babel.md | 39 ++++++++ docs/core-plugins/e2e-cypress.md | 48 ++++++++++ docs/core-plugins/e2e-nightwatch.md | 37 ++++++++ docs/core-plugins/eslint.md | 72 +++++++++++++++ docs/core-plugins/pwa.md | 135 ++++++++++++++++++++++++++++ docs/core-plugins/typescript.md | 39 ++++++++ docs/core-plugins/unit-jest.md | 70 +++++++++++++++ docs/core-plugins/unit-mocha.md | 36 ++++++++ 8 files changed, 476 insertions(+) create mode 100644 docs/core-plugins/babel.md create mode 100644 docs/core-plugins/e2e-cypress.md create mode 100644 docs/core-plugins/e2e-nightwatch.md create mode 100644 docs/core-plugins/eslint.md create mode 100644 docs/core-plugins/pwa.md create mode 100644 docs/core-plugins/typescript.md create mode 100644 docs/core-plugins/unit-jest.md create mode 100644 docs/core-plugins/unit-mocha.md diff --git a/docs/core-plugins/babel.md b/docs/core-plugins/babel.md new file mode 100644 index 0000000000..4bd37521af --- /dev/null +++ b/docs/core-plugins/babel.md @@ -0,0 +1,39 @@ +# @vue/cli-plugin-babel + +> babel plugin for vue-cli + +## Configuration + +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 `babel.config.js` to use any other Babel presets or plugins. + +By default, `babel-loader` excludes files inside `node_modules` dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the `transpileDependencies` option in `vue.config.js`: + +``` js +module.exports = { + transpileDependencies: [ + // can be string or regex + 'my-dep', + /other-dep/ + ] +} +``` + +## Caching + +[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`. + +## Parallelization + +[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`. + +## Installing in an Already Created Project + +``` sh +vue add @vue/babel +``` + +## Injected webpack-chain Rules + +- `config.rule('js')` +- `config.rule('js').use('babel-loader')` +- `config.rule('js').use('cache-loader')` diff --git a/docs/core-plugins/e2e-cypress.md b/docs/core-plugins/e2e-cypress.md new file mode 100644 index 0000000000..e5e963a92c --- /dev/null +++ b/docs/core-plugins/e2e-cypress.md @@ -0,0 +1,48 @@ +# @vue/cli-plugin-e2e-cypress + +> e2e-cypress plugin for vue-cli + +This adds E2E testing support using [Cypress](https://www.cypress.io/). + +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). + +## Injected Commands + +- **`vue-cli-service test:e2e`** + + Run e2e tests with `cypress run`. + + By default it launches Cypress in interactive mode with a GUI. If you want to run the tests in headless mode (e.g. for CI), you can do so with the `--headless` option. + + The command 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. + + Options: + + ``` + --headless run in headless mode without GUI + --mode specify the mode the dev server should run in. (default: production) + --url run e2e tests against given url instead of auto-starting dev server + -s, --spec (headless only) runs a specific spec file. defaults to "all" + ``` + + Additionally: + + - In GUI mode, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open); + - In `--headless` mode, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). + + Examples : + - Run Cypress in headless mode for a specific file: `vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js` + +## Configuration + +We've pre-configured Cypress to place most of the e2e testing related files under `/tests/e2e`. You can also check out [how to configure Cypress via `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options). + +## Environment Variables + +Cypress doesn't load .env files for your test files the same way as `vue-cli` does for your [application code](https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code). Cypress supports a few ways to [define env variables](https://docs.cypress.io/guides/guides/environment-variables.html#) but the easiest one is to use .json files (either `cypress.json` or `cypress.env.json`) to define environment variables. Keep in mind those variables are accessible via `Cypress.env` function instead of regular `process.env` object. + +## Installing in an Already Created Project + +``` sh +vue add @vue/e2e-cypress +``` diff --git a/docs/core-plugins/e2e-nightwatch.md b/docs/core-plugins/e2e-nightwatch.md new file mode 100644 index 0000000000..bbced35a28 --- /dev/null +++ b/docs/core-plugins/e2e-nightwatch.md @@ -0,0 +1,37 @@ +# @vue/cli-plugin-e2e-nightwatch + +> e2e-nightwatch plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service test:e2e`** + + run e2e tests with [NightwatchJS](http://nightwatchjs.org). + + Options: + + ``` + --url run e2e tests against given url instead of auto-starting dev server + --config use custom nightwatch config file (overrides internals) + -e, --env specify comma-delimited browser envs to run in (default: chrome) + -t, --test specify a test to run by name + -f, --filter glob to filter tests by filename + ``` + + > Note: this plugin currently uses Nightwatch v0.9.x. We are waiting for Nightwatch 1.0 to stabilize before upgrading. + + Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js). + +## Configuration + +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). + +Alternatively, you can completely replace the internal config with a custom config file using the `--config` option. + +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). + +## Installing in an Already Created Project + +``` sh +vue add @vue/e2e-nightwatch +``` diff --git a/docs/core-plugins/eslint.md b/docs/core-plugins/eslint.md new file mode 100644 index 0000000000..fb07db7150 --- /dev/null +++ b/docs/core-plugins/eslint.md @@ -0,0 +1,72 @@ +# @vue/cli-plugin-eslint + +> eslint plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service lint`** + + ``` + Usage: vue-cli-service lint [options] [...files] + + Options: + + --format [formatter] specify formatter (default: codeframe) + --no-fix do not fix errors + --max-errors specify number of errors to make build failed (default: 0) + --max-warnings specify number of warnings to make build failed (default: Infinity) + ``` + + Lints and fixes files. If no specific files are given, it lints all files in `src` and `test`. + + Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported. + +## Configuration + +ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`. + +Lint-on-save during development with `eslint-loader` is enabled by default. It can be disabled with the `lintOnSave` option in `vue.config.js`: + +``` js +module.exports = { + lintOnSave: false +} +``` + +When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation. + +To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail. + +Alternatively, you can configure the overlay to display both warnings and errors: + +``` js +// vue.config.js +module.exports = { + devServer: { + overlay: { + warnings: true, + errors: true + } + } +} +``` + +When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config: + +``` js +// vue.config.js +module.exports = { + lintOnSave: process.env.NODE_ENV !== 'production' +} +``` + +## Installing in an Already Created Project + +``` sh +vue add @vue/eslint +``` + +## Injected webpack-chain Rules + +- `config.module.rule('eslint')` +- `config.module.rule('eslint').use('eslint-loader')` diff --git a/docs/core-plugins/pwa.md b/docs/core-plugins/pwa.md new file mode 100644 index 0000000000..51c46b7098 --- /dev/null +++ b/docs/core-plugins/pwa.md @@ -0,0 +1,135 @@ +# @vue/cli-plugin-pwa + +> pwa plugin for vue-cli + +The service worker added with this plugin is only enabled in the production environment (e.g. only if you run `npm run build` or `yarn build`). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included. + +Instead, in the development mode the `noopServiceWorker.js` is included. This service worker file is effectively a 'no-op' that will reset any previous service worker registered for the same host:port combination. + +If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache. + +## Configuration + +Configuration is handled via the `pwa` property of either the `vue.config.js` +file, or the `"vue"` field in `package.json`. + +- **pwa.workboxPluginMode** + + This allows you to the choose between the two modes supported by the underlying + [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). + + - `'GenerateSW'` (default), will lead to a new service worker file being created + each time you rebuild your web app. + + - `'InjectManifest'` allows you to start with an existing service worker file, + and creates a copy of that file with a "precache manifest" injected into it. + + The "[Which Plugin to Use?](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use)" + guide can help you choose between the two modes. + +- **pwa.workboxOptions** + + These options are passed on through to the underlying `workbox-webpack-plugin`. + + For more information on what values are supported, please see the guide for + [`GenerateSW`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config) + or for [`InjectManifest`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config). + +- **pwa.name** + + - Default: "name" field in `package.json` + + Used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML. Note you will need to edit `public/manifest.json` to match this. + +- **pwa.themeColor** + + - Default: `'#4DBA87'` + +- **pwa.msTileColor** + + - Default: `'#000000'` + +- **pwa.appleMobileWebAppCapable** + + - Default: `'no'` + + This defaults to `'no'` because iOS before 11.3 does not have proper PWA support. See [this article](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb) for more details. + +- **pwa.appleMobileWebAppStatusBarStyle** + + - Default: `'default'` + +- **pwa.assetsVersion** + + - Default: `''` + + This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append `?v=` to the URLs of the icons and manifest. + +- **pwa.manifestPath** + + - Default: `'manifest.json'` + + The path of app’s manifest. + +- **pwa.manifestOptions** + + - Default: `{}` + + The object will be used to generate the `manifest.json` + + If the following attributes are not defined in the object, the options of `pwa` or default options will be used instead. + - name: `pwa.name` + - short_name: `pwa.name` + - start_url: `'.'` + - display: `'standalone'` + - theme_color: `pwa.themeColor` + +- **pwa.iconPaths** + + - Defaults: + + ```js + { + favicon32: 'img/icons/favicon-32x32.png', + favicon16: 'img/icons/favicon-16x16.png', + appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png', + maskIcon: 'img/icons/safari-pinned-tab.svg', + msTileImage: 'img/icons/msapplication-icon-144x144.png' + } + ``` + + Change these values to use different paths for your icons. + +### Example Configuration + +```js +// Inside vue.config.js +module.exports = { + // ...other vue-cli plugin options... + pwa: { + name: 'My App', + themeColor: '#4DBA87', + msTileColor: '#000000', + appleMobileWebAppCapable: 'yes', + appleMobileWebAppStatusBarStyle: 'black', + + // configure the workbox plugin + workboxPluginMode: 'InjectManifest', + workboxOptions: { + // swSrc is required in InjectManifest mode. + swSrc: 'dev/sw.js', + // ...other Workbox options... + } + } +} +``` + +## Installing in an Already Created Project + +``` sh +vue add @vue/pwa +``` + +## Injected webpack-chain Rules + +- `config.plugin('workbox')` diff --git a/docs/core-plugins/typescript.md b/docs/core-plugins/typescript.md new file mode 100644 index 0000000000..dedbbbcbb0 --- /dev/null +++ b/docs/core-plugins/typescript.md @@ -0,0 +1,39 @@ +# @vue/cli-plugin-typescript + +> typescript plugin for vue-cli + +Uses TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for faster off-thread type checking. + +## Configuration + +TypeScript can be configured via `tsconfig.json`. + +Since `3.0.0-rc.6`, `typescript` is now a peer dependency of this package, so you can use a specific version of TypeScript by updating your project's `package.json`. + +This plugin can be used alongside `@vue/cli-plugin-babel`. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets. + +## Injected Commands + +If opted to use [TSLint](https://palantir.github.io/tslint/) during project creation, `vue-cli-service lint` will be injected. + +## Caching + +[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/ts-loader`. + +## Parallelization + +[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`. + +## Installing in an Already Created Project + +``` sh +vue add @vue/typescript +``` + +## Injected webpack-chain Rules + +- `config.rule('ts')` +- `config.rule('ts').use('ts-loader')` +- `config.rule('ts').use('babel-loader')` (when used alongside `@vue/cli-plugin-babel`) +- `config.rule('ts').use('cache-loader')` +- `config.plugin('fork-ts-checker')` diff --git a/docs/core-plugins/unit-jest.md b/docs/core-plugins/unit-jest.md new file mode 100644 index 0000000000..7aabbbd547 --- /dev/null +++ b/docs/core-plugins/unit-jest.md @@ -0,0 +1,70 @@ +# @vue/cli-plugin-unit-jest + +> unit-jest plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service test:unit`** + + Run unit tests with Jest. Default `testMatch` is `/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))` which matches: + + - Any files in `tests/unit` that end in `.spec.(js|jsx|ts|tsx)`; + - Any js(x)/ts(x) files inside `__tests__` directories. + + Usage: `vue-cli-service test:unit [options] ` + + All [Jest command line options](https://facebook.github.io/jest/docs/en/cli.html) are also supported. + +## Debugging Tests + +Note that directly running `jest` will fail because the Babel preset requires hints to make your code work in Node.js, so you must run your tests with `vue-cli-service test:unit`. + +If you want to debug your tests via the Node inspector, you can run the following: + +```sh +# macOS or linux +node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit + +# Windows +node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit +``` + +## Configuration + +Jest can be configured via `jest.config.js` in your project root, or the `jest` field in `package.json`. + +## Installing in an Already Created Project + +```sh +vue add @vue/unit-jest +``` + +## Transform dependencies from `/node_modules` + +By default, jest doesn't transform anything from `/node_modules`. + +Since jest runs in node, we also don't have to transpile anything that uses modern ECMAScript features as Node >=8 already supports these features, so it's a sensible default. cli-plugin-jest also doesn't respect the `transpileDependencies` option in `vue.config.js` for the same reason. + +However, we have (at least) three cases where we do need to transpile code from `/node_modules` in jest: + +1. Usage of ES6 `import`/`export` statements, which have to be compiled to commonjs `module.exports` +2. Single File Components (`.vue` files) which have to be run through `vue-jest` +3. Typescript code + +To do this, we need to add an exception to the `transformIgnorePatterns` option of jest. This is its default value: + +```javascript +transformIgnorePatterns: ['/node_modules/'] +``` + +We have to add exceptions to this pattern with a RegExp negative lookahead: + +```javascript +transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)'] +``` + +To exclude multiple libraries: + +```javascript +transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)'] +``` diff --git a/docs/core-plugins/unit-mocha.md b/docs/core-plugins/unit-mocha.md new file mode 100644 index 0000000000..f1bb0ca706 --- /dev/null +++ b/docs/core-plugins/unit-mocha.md @@ -0,0 +1,36 @@ +# @vue/cli-plugin-unit-mocha + +> unit-mocha plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service test:unit`** + + Run unit tests with [mocha-webpack](https://github.com/zinserjan/mocha-webpack) + [chai](http://chaijs.com/). + + **Note the tests are run inside Node.js with browser environment simulated with JSDOM.** + + ``` + Usage: vue-cli-service test:unit [options] [...files] + + Options: + + --watch, -w run in watch mode + --grep, -g only run tests matching + --slow, -s "slow" test threshold in milliseconds + --timeout, -t timeout threshold in milliseconds + --bail, -b bail after first test failure + --require, -r require the given module before running tests + --include include the given module into test bundle + --inspect-brk Enable inspector to debug the tests + ``` + + Default files matches are: any files in `tests/unit` that end in `.spec.(ts|js)`. + + All [mocha-webpack command line options](http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html) are also supported. + +## Installing in an Already Created Project + +``` sh +vue add @vue/unit-mocha +```