From dd6cd856e24ebd95485837dd9be51fc386b5a87d Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 8 Feb 2018 17:25:43 -0500 Subject: [PATCH] docs: readme for plugins --- packages/@vue/cli-plugin-babel/README.md | 13 +++-- .../@vue/cli-plugin-e2e-cypress/README.md | 32 ++++++------ .../@vue/cli-plugin-e2e-nightwatch/README.md | 20 ++++---- packages/@vue/cli-plugin-eslint/README.md | 30 ++++++++++++ packages/@vue/cli-plugin-pwa/README.md | 41 ++++++++++------ packages/@vue/cli-plugin-typescript/README.md | 49 +++++++++++++++++++ packages/@vue/cli-plugin-unit-jest/README.md | 24 +++++++++ packages/@vue/cli-plugin-unit-mocha/README.md | 37 ++++++++++++++ packages/@vue/cli-plugin-unit-mocha/index.js | 8 +-- 9 files changed, 205 insertions(+), 49 deletions(-) diff --git a/packages/@vue/cli-plugin-babel/README.md b/packages/@vue/cli-plugin-babel/README.md index 9d6672e65..5d4f1769f 100644 --- a/packages/@vue/cli-plugin-babel/README.md +++ b/packages/@vue/cli-plugin-babel/README.md @@ -2,7 +2,7 @@ > babel plugin for vue-cli -## Transpilation +## 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 `.babelrc` to use any other Babel presets or plugins. @@ -19,10 +19,6 @@ module.exports = { } ``` -## Injected Config Rules - -- `config.rule('js')` - ## Caching [cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/cache-loader`. @@ -37,3 +33,10 @@ module.exports = { npm install -D @vue/cli-plugin-babel vue invoke babel ``` + +## Injected webpack-chain Rules + +- `config.rule('js')` +- `config.rule('js').use('babel-loader')` +- `config.rule('js').use('cache-loader')` +- `config.rule('js').use('thread-loader')` diff --git a/packages/@vue/cli-plugin-e2e-cypress/README.md b/packages/@vue/cli-plugin-e2e-cypress/README.md index b0394ccb4..70ca72a2e 100644 --- a/packages/@vue/cli-plugin-e2e-cypress/README.md +++ b/packages/@vue/cli-plugin-e2e-cypress/README.md @@ -8,32 +8,32 @@ Cypress offers a rich interactive interface for running E2E tests, but currently ## Injected Commands -### `vue-cli-service e2e` +- **`vue-cli-service e2e`** -run e2e tests headlessly with `cypress run`. + run e2e tests headlessly with `cypress run`. -Options: + Options: -``` ---url run e2e tests against given url instead of auto-starting dev server --s, --spec runs a specific spec file. defaults to "all" -``` + ``` + --url run e2e tests against given url instead of auto-starting dev server + -s, --spec runs a specific spec file. defaults to "all" + ``` -Additionally, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). + Additionally, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). -### `vue-cli-service e2e:open` +- **`vue-cli-service e2e:open`** -run e2e tests in interactive mode with `cypress open`. + run e2e tests in interactive mode with `cypress open`. -Options: + Options: -``` ---url run e2e tests against given url instead of auto-starting dev server -``` + ``` + --url run e2e tests against given url instead of auto-starting dev server + ``` -Additionally, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open). + Additionally, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open). -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. + 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. ## Configuration diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/README.md b/packages/@vue/cli-plugin-e2e-nightwatch/README.md index c94f817c9..f1adbed5f 100644 --- a/packages/@vue/cli-plugin-e2e-nightwatch/README.md +++ b/packages/@vue/cli-plugin-e2e-nightwatch/README.md @@ -4,20 +4,20 @@ ## Injected Commands -### `vue-cli-service e2e` +- **`vue-cli-service e2e`** -run e2e tests with [NightwatchJS](nightwatchjs.org). + run e2e tests with [NightwatchJS](nightwatchjs.org). -Options: + Options: -``` ---url run e2e tests against given url instead of auto-starting dev server --e, --env specify comma-delimited browser envs to run in (default: chrome) --t, --test sepcify a test to run by name --f, --filter glob to filter tests by filename -``` + ``` + --url run e2e tests against given url instead of auto-starting dev server + -e, --env specify comma-delimited browser envs to run in (default: chrome) + -t, --test sepcify a test to run by name + -f, --filter glob to filter tests by filename + ``` -Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js). + Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js). ## Configuration diff --git a/packages/@vue/cli-plugin-eslint/README.md b/packages/@vue/cli-plugin-eslint/README.md index c357b2674..4b25dbf89 100644 --- a/packages/@vue/cli-plugin-eslint/README.md +++ b/packages/@vue/cli-plugin-eslint/README.md @@ -1,3 +1,33 @@ # @vue/cli-plugin-eslint > eslint plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service lint`** + + Lints and fixes files in `src` and `test`. + +## Configuration + +ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`. + +Lint-on-save during development with `eslint-loader` can be enabled with the `lintOnSave` option in `vue.config.js`: + +``` js +module.exports = { + lintOnSave: true +} +``` + +## Installing in an Already Created Project + +``` sh +npm install -D @vue/cli-plugin-eslint +vue invoke eslint +``` + +## Injected webpack-chain Rules + +- `config.rule('eslint')` +- `config.rule('eslint').use('eslint-loader')` diff --git a/packages/@vue/cli-plugin-pwa/README.md b/packages/@vue/cli-plugin-pwa/README.md index 3f2707e75..c237e54be 100644 --- a/packages/@vue/cli-plugin-pwa/README.md +++ b/packages/@vue/cli-plugin-pwa/README.md @@ -5,29 +5,29 @@ ## Configuration Configuration is handled via the `pwa` property of either the `vue.config.js` -file, or the `"vue"` field in `package.json`. +file, or the `"vue"` field in `package.json`. -### pwa.workboxPluginMode +- **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). + 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. + - `'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. + - `'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. + 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 +- **pwa.workboxOptions** -These options are passed on through to the underlying `workbox-webpack-plugin`. + 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). + 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). ### Example Configuration @@ -45,3 +45,14 @@ module.exports = { }, }; ``` + +## Installing in an Already Created Project + +``` sh +npm install -D @vue/cli-plugin-pwa +vue invoke pwa +``` + +## Injected webpack-chain Rules + +- `config.plugin('workbox')` diff --git a/packages/@vue/cli-plugin-typescript/README.md b/packages/@vue/cli-plugin-typescript/README.md index 8e77ba124..8ad0755a6 100644 --- a/packages/@vue/cli-plugin-typescript/README.md +++ b/packages/@vue/cli-plugin-typescript/README.md @@ -1,3 +1,52 @@ # @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`. + +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. + +By default, `ts-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`: + +``` js +module.exports = { + chainWebpack: config => { + config + .rule('ts') + .include + .add(/module-to-transpile/) + } +} +``` + +## 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/cache-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 +npm install -D @vue/cli-plugin-typescript +vue invoke 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.rule('ts').use('thread-loader')` +- `config.plugin('fork-ts-checker')` diff --git a/packages/@vue/cli-plugin-unit-jest/README.md b/packages/@vue/cli-plugin-unit-jest/README.md index 1a1e773d8..7ec999da5 100644 --- a/packages/@vue/cli-plugin-unit-jest/README.md +++ b/packages/@vue/cli-plugin-unit-jest/README.md @@ -1,3 +1,27 @@ # @vue/cli-plugin-unit-jest > unit-jest plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service test`** + + Run unit tests with Jest. Default files matches are: + + - Any files in `test/unit` that end in `.spec.(js|ts)`; + - Any js/ts files inside `__tests__` directories. + + Usage: `vue-cli-service test [options] ` + + All [Jest command line options](https://facebook.github.io/jest/docs/en/cli.html) are also supported. + +## 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 +npm install -D @vue/cli-plugin-unit-jest +vue invoke unit-jest +``` diff --git a/packages/@vue/cli-plugin-unit-mocha/README.md b/packages/@vue/cli-plugin-unit-mocha/README.md index 0a223f9cb..2b6a4c64e 100644 --- a/packages/@vue/cli-plugin-unit-mocha/README.md +++ b/packages/@vue/cli-plugin-unit-mocha/README.md @@ -1,3 +1,40 @@ # @vue/cli-plugin-unit-mocha > unit-mocha plugin for vue-cli + +## Injected Commands + +- **`vue-cli-service test`** + + 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 [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 + ``` + + Default files matches are: any files in `test/unit` that end in `.spec.(ts|js)`. + + All [mocha-wepback command line options](http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html) are also supported. + +## 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 +npm install -D @vue/cli-plugin-unit-mocha +vue invoke unit-mocha +``` diff --git a/packages/@vue/cli-plugin-unit-mocha/index.js b/packages/@vue/cli-plugin-unit-mocha/index.js index 87f12d016..ec75c6a70 100644 --- a/packages/@vue/cli-plugin-unit-mocha/index.js +++ b/packages/@vue/cli-plugin-unit-mocha/index.js @@ -40,11 +40,13 @@ module.exports = api => { '--webpack-config', require.resolve('@vue/cli-service/webpack.config.js'), ...rawArgv, - ...(hasInlineFilesGlob ? [] : [`test/unit/**/*.js`]) + ...(hasInlineFilesGlob ? [] : [ + api.hasPlugin('typescript') + ? `test/unit/**/*.spec.ts` + : `test/unit/**/*.spec.js` + ]) ] - console.log(argv) - return new Promise((resolve, reject) => { const child = execa(bin, argv, { stdio: 'inherit' }) child.on('error', reject)