From 40fdc20d594ab225b8becab449e49822421d2feb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Tue, 26 Feb 2019 16:09:17 +0100 Subject: [PATCH 1/9] docs: add warning about jest to transpileDependencies docs --- docs/config/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/config/README.md b/docs/config/README.md index 96560b8511..39447545ad 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -187,6 +187,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - Default: `[]` By default `babel-loader` ignores all files inside `node_modules`. If you want to explicitly transpile a dependency with Babel, you can list it in this option. + +::: warning Jest config +This option is not resprected by the [cli-unit-jest plugin](#jest), because in jest, we don't have to transpile stuff from `/node_modules` unless it uses non-standard features (node 8> supports the latest ECMAScript features already). + +However, jest sometimes has to transpile content from node_modules if the code that's consumed uses ES6 `import`/`export` syntax. In that case, use the `tranformIgnorePatterns` option in `jest.config.js`. + +See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-jest/README.md) for more information. +::: ### productionSourceMap From f1254e2b8cd263210ee57b2a9542c2b99c9d6d93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Tue, 26 Feb 2019 16:17:28 +0100 Subject: [PATCH 2/9] docs: explain tranformIgnorePatterns option usage in cli-plugin-jest README --- packages/@vue/cli-plugin-unit-jest/README.md | 29 ++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/@vue/cli-plugin-unit-jest/README.md b/packages/@vue/cli-plugin-unit-jest/README.md index b97be3ae01..392a8575c4 100644 --- a/packages/@vue/cli-plugin-unit-jest/README.md +++ b/packages/@vue/cli-plugin-unit-jest/README.md @@ -38,3 +38,32 @@ Jest can be configured via `jest.config.js` in your project root, or the `jest` ``` sh vue add @vue/unit-jest ``` + +## Transform dependencies from `/node_modules` + +By default, jest doesn't transform anything from `/nodee_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 two 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` + +To do this, we need to add an exception to the `tranformIgnorePatterns` option of jest. This is its default value: + +```js +tranformIgnorePatterns: ["/node_modules/"] +``` + +We have to add exceptions to this pattern with a RegExp negative lookahead: + +```js +tranformIgnorePatterns: ["/node_modules/(?!name-of-lib-o-transform)"] +``` + +To exclude multiple libraries: + +```js +tranformIgnorePatterns: ["/node_modules/(?!lib-to-transform|other-lib)"] +``` From 826d1ff3d4ca57a95d5b71cfcdc8b24e8a05a153 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Tue, 26 Feb 2019 16:19:14 +0100 Subject: [PATCH 3/9] docs: add `transformIgnorePatterns` option with default value. Allows easier customisation when exceptions have to be added. --- packages/@vue/cli-plugin-unit-jest/generator/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@vue/cli-plugin-unit-jest/generator/index.js b/packages/@vue/cli-plugin-unit-jest/generator/index.js index 5b3c226335..618b65e109 100644 --- a/packages/@vue/cli-plugin-unit-jest/generator/index.js +++ b/packages/@vue/cli-plugin-unit-jest/generator/index.js @@ -23,6 +23,7 @@ module.exports = (api, _, __, invoking) => { '^.+\\.vue$': 'vue-jest', '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub' }, + tranformIgnorePatterns: ['/node_modules/'], // support the same @ -> src alias mapping in source code 'moduleNameMapper': { '^@/(.*)$': '/src/$1' From bbf4238bcf9809d69986eb35dd1132b00c93702b Mon Sep 17 00:00:00 2001 From: Thorsten Date: Tue, 26 Feb 2019 20:07:13 +0100 Subject: [PATCH 4/9] docs: fix typos --- docs/config/README.md | 69 +++++++++---------- packages/@vue/cli-plugin-unit-jest/README.md | 19 ++--- .../cli-plugin-unit-jest/generator/index.js | 2 +- 3 files changed, 45 insertions(+), 45 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index 39447545ad..b761cf0162 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -22,7 +22,7 @@ See the [Browser Compatibility](../guide/browser-compatibility.md#browserslist) The file should export an object containing options: -``` js +```js // vue.config.js module.exports = { // options... @@ -50,15 +50,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - You are using HTML5 `history.pushState` routing; - You are using the `pages` option to build a multi-paged app. - ::: + ::: This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value: - ``` js + ```js module.exports = { - publicPath: process.env.NODE_ENV === 'production' - ? '/production-sub-path/' - : '/' + publicPath: + process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', } ``` @@ -108,7 +107,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - An object that specifies its `entry`, `template`, `filename`, `title` and `chunks` (all optional except `entry`). Any other properties added beside those will also be passed directly to `html-webpack-plugin`, allowing user to customize said plugin; - Or a string specifying its `entry`. - ``` js + ```js module.exports = { pages: { index: { @@ -123,14 +122,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. title: 'Index Page', // chunks to include on this page, by default includes // extracted common chunks and vendor chunks. - chunks: ['chunk-vendors', 'chunk-common', 'index'] + chunks: ['chunk-vendors', 'chunk-common', 'index'], }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. - subpage: 'src/subpage/main.js' - } + subpage: 'src/subpage/main.js', + }, } ``` @@ -151,24 +150,24 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. Alternatively, you can configure the overlay to display both warnings and errors: - ``` js + ```js // vue.config.js module.exports = { devServer: { overlay: { warnings: true, - errors: 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 + ```js // vue.config.js module.exports = { - lintOnSave: process.env.NODE_ENV !== 'production' + lintOnSave: process.env.NODE_ENV !== 'production', } ``` @@ -187,11 +186,11 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - Default: `[]` By default `babel-loader` ignores all files inside `node_modules`. If you want to explicitly transpile a dependency with Babel, you can list it in this option. - + ::: warning Jest config -This option is not resprected by the [cli-unit-jest plugin](#jest), because in jest, we don't have to transpile stuff from `/node_modules` unless it uses non-standard features (node 8> supports the latest ECMAScript features already). +This option is not respected by the [cli-unit-jest plugin](#jest), because in jest, we don't have to transpile code from `/node_modules` unless it uses non-standard features - Node >8.11 supports the latest ECMAScript features already. -However, jest sometimes has to transpile content from node_modules if the code that's consumed uses ES6 `import`/`export` syntax. In that case, use the `tranformIgnorePatterns` option in `jest.config.js`. +However, jest sometimes has to transform content from node_modules if that code uses ES6 `import`/`export` syntax. In that case, use the `tranformIgnorePatterns` option in `jest.config.js`. See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-jest/README.md) for more information. ::: @@ -279,7 +278,7 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 Pass options to CSS-related loaders. For example: - ``` js + ```js module.exports = { css: { loaderOptions: { @@ -288,9 +287,9 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 }, postcss: { // options here will be passed to postcss-loader - } - } - } + }, + }, + }, } ``` @@ -326,11 +325,11 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 `devServer.proxy` can be a string pointing to the development API server: - ``` js + ```js module.exports = { devServer: { - proxy: 'http://localhost:4000' - } + proxy: 'http://localhost:4000', + }, } ``` @@ -338,20 +337,20 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 If you want to have more control over the proxy behavior, you can also use an object with `path: options` pairs. Consult [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options: - ``` js + ```js module.exports = { devServer: { proxy: { '^/api': { target: '', ws: true, - changeOrigin: true + changeOrigin: true, }, '^/foo': { - target: '' - } - } - } + target: '', + }, + }, + }, } ``` @@ -374,14 +373,14 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 This is an object that doesn't go through any schema validation, so it can be used to pass arbitrary options to 3rd party plugins. For example: - ``` js + ```js module.exports = { pluginOptions: { foo: { // plugins can access these options as // `options.pluginOptions.foo`. - } - } + }, + }, } ``` diff --git a/packages/@vue/cli-plugin-unit-jest/README.md b/packages/@vue/cli-plugin-unit-jest/README.md index 392a8575c4..89d3bbafba 100644 --- a/packages/@vue/cli-plugin-unit-jest/README.md +++ b/packages/@vue/cli-plugin-unit-jest/README.md @@ -21,7 +21,7 @@ Note that directly running `jest` will fail because the Babel preset requires hi If you want to debug your tests via the Node inspector, you can run the following: -``` sh +```sh # macOS or linux node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit @@ -35,7 +35,7 @@ Jest can be configured via `jest.config.js` in your project root, or the `jest` ## Installing in an Already Created Project -``` sh +```sh vue add @vue/unit-jest ``` @@ -45,25 +45,26 @@ By default, jest doesn't transform anything from `/nodee_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 two cases where we do need to transpile code from `/node_modules` in jest: +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 `tranformIgnorePatterns` option of jest. This is its default value: -```js -tranformIgnorePatterns: ["/node_modules/"] +```javascript +transformIgnorePatterns: ['/node_modules/'] ``` We have to add exceptions to this pattern with a RegExp negative lookahead: -```js -tranformIgnorePatterns: ["/node_modules/(?!name-of-lib-o-transform)"] +```javascript +transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)'] ``` To exclude multiple libraries: -```js -tranformIgnorePatterns: ["/node_modules/(?!lib-to-transform|other-lib)"] +```javascript +transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)'] ``` diff --git a/packages/@vue/cli-plugin-unit-jest/generator/index.js b/packages/@vue/cli-plugin-unit-jest/generator/index.js index 618b65e109..e1e19a4e25 100644 --- a/packages/@vue/cli-plugin-unit-jest/generator/index.js +++ b/packages/@vue/cli-plugin-unit-jest/generator/index.js @@ -23,7 +23,7 @@ module.exports = (api, _, __, invoking) => { '^.+\\.vue$': 'vue-jest', '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub' }, - tranformIgnorePatterns: ['/node_modules/'], + 'transformIgnorePatterns': ['/node_modules/'], // support the same @ -> src alias mapping in source code 'moduleNameMapper': { '^@/(.*)$': '/src/$1' From 54375e3ed72e6f72cf5dff2595d3cc05121d4c19 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 8 Mar 2019 16:52:20 +0100 Subject: [PATCH 5/9] refactor: undo unnecessary formating changed --- docs/config/README.md | 59 +++++++++++++++++++++---------------------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index b761cf0162..0316a69d22 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -22,7 +22,7 @@ See the [Browser Compatibility](../guide/browser-compatibility.md#browserslist) The file should export an object containing options: -```js +``` js // vue.config.js module.exports = { // options... @@ -54,10 +54,9 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value: - ```js + ``` js module.exports = { - publicPath: - process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', + publicPath: process.env.NODE_ENV === 'production' ? 'production-sub-path/' : '/', } ``` @@ -107,7 +106,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - An object that specifies its `entry`, `template`, `filename`, `title` and `chunks` (all optional except `entry`). Any other properties added beside those will also be passed directly to `html-webpack-plugin`, allowing user to customize said plugin; - Or a string specifying its `entry`. - ```js + ``` js module.exports = { pages: { index: { @@ -122,14 +121,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. title: 'Index Page', // chunks to include on this page, by default includes // extracted common chunks and vendor chunks. - chunks: ['chunk-vendors', 'chunk-common', 'index'], + chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. - subpage: 'src/subpage/main.js', - }, + subpage: 'src/subpage/main.js' + } } ``` @@ -150,24 +149,24 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. Alternatively, you can configure the overlay to display both warnings and errors: - ```js + ``` js // vue.config.js module.exports = { devServer: { overlay: { warnings: true, - errors: 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 + ``` js // vue.config.js module.exports = { - lintOnSave: process.env.NODE_ENV !== 'production', + lintOnSave: process.env.NODE_ENV !== 'production' } ``` @@ -278,7 +277,7 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 Pass options to CSS-related loaders. For example: - ```js + ``` js module.exports = { css: { loaderOptions: { @@ -287,9 +286,9 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 }, postcss: { // options here will be passed to postcss-loader - }, - }, - }, + } + } + } } ``` @@ -325,11 +324,11 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 `devServer.proxy` can be a string pointing to the development API server: - ```js + ``` js module.exports = { devServer: { - proxy: 'http://localhost:4000', - }, + proxy: 'http://localhost:4000' + } } ``` @@ -337,20 +336,20 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 If you want to have more control over the proxy behavior, you can also use an object with `path: options` pairs. Consult [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options: - ```js + ``` js module.exports = { devServer: { proxy: { '^/api': { target: '', ws: true, - changeOrigin: true, + changeOrigin: true }, '^/foo': { - target: '', - }, - }, - }, + target: '' + } + } + } } ``` @@ -373,14 +372,14 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 This is an object that doesn't go through any schema validation, so it can be used to pass arbitrary options to 3rd party plugins. For example: - ```js + ``` js module.exports = { pluginOptions: { foo: { // plugins can access these options as // `options.pluginOptions.foo`. - }, - }, + } + } } ``` From 38b64ecf2f9078b4cc7d7284f78e573d59936758 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 8 Mar 2019 16:54:36 +0100 Subject: [PATCH 6/9] refactor: undo some more formatting --- docs/config/README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index 0316a69d22..8156fc7e75 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -50,13 +50,16 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - You are using HTML5 `history.pushState` routing; - You are using the `pages` option to build a multi-paged app. - ::: + :: This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value: ``` js module.exports = { - publicPath: process.env.NODE_ENV === 'production' ? 'production-sub-path/' : '/', + publicPath: process.env.NODE_ENV === 'production' + + ? 'production-sub-path/' + : '/', } ``` From d0f15a66e174314efcfa1394c582c933f78467c3 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 8 Mar 2019 16:55:55 +0100 Subject: [PATCH 7/9] chore: add missing colon --- docs/config/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index 8156fc7e75..862a10d8d6 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -50,14 +50,13 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. - You are using HTML5 `history.pushState` routing; - You are using the `pages` option to build a multi-paged app. - :: + ::: This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value: ``` js module.exports = { publicPath: process.env.NODE_ENV === 'production' - ? 'production-sub-path/' : '/', } From c30c38031f278f55a52aa74894a4ba833507fccf Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 8 Mar 2019 16:56:33 +0100 Subject: [PATCH 8/9] chore: remove f*ing comma --- docs/config/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index 862a10d8d6..9ab8739fe5 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -57,8 +57,8 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. ``` js module.exports = { publicPath: process.env.NODE_ENV === 'production' - ? 'production-sub-path/' - : '/', + ? 'production-sub-path/' + : '/' } ``` From 190bcd188f83d0677272e6f5260ad0806a753447 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 8 Mar 2019 16:57:20 +0100 Subject: [PATCH 9/9] chore: fix missing slash. --- docs/config/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/README.md b/docs/config/README.md index 9ab8739fe5..8cce1bbb23 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -57,7 +57,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead. ``` js module.exports = { publicPath: process.env.NODE_ENV === 'production' - ? 'production-sub-path/' + ? '/production-sub-path/' : '/' } ```