Create, develop and manage your projects through an accompanying graphical user interface.
-
-
Instant Prototyping
-
Instantly prototype new ideas with a single Vue file.
-
Future Ready
Effortlessly ship native ES2015 code for modern browsers, or build your vue components as native web components.
diff --git a/docs/config/README.md b/docs/config/README.md
index 1479c86236..5c4c6e38ca 100644
--- a/docs/config/README.md
+++ b/docs/config/README.md
@@ -65,7 +65,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
- Type: `string`
- Default: `'dist'`
- The directory where the production build files will be generated in when running `vue-cli-service build`. Note the target directory will be removed before building (this behavior can be disabled by passing `--no-clean` when building).
+ The directory where the production build files will be generated in when running `vue-cli-service build`. Note the target directory contents will be removed before building (this behavior can be disabled by passing `--no-clean` when building).
::: tip
Always use `outputDir` instead of modifying webpack `output.path`.
diff --git a/docs/core-plugins/babel.md b/docs/core-plugins/babel.md
index d5b5742f8a..70eea46f79 100644
--- a/docs/core-plugins/babel.md
+++ b/docs/core-plugins/babel.md
@@ -20,7 +20,7 @@ module.exports = {
## Caching
-[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`.
+Cache options of [babel-loader](https://github.com/babel/babel-loader#options) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`.
## Parallelization
@@ -38,4 +38,3 @@ vue add babel
- `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
index 4659a24528..e3e4792928 100644
--- a/docs/core-plugins/e2e-cypress.md
+++ b/docs/core-plugins/e2e-cypress.md
@@ -4,7 +4,9 @@
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).
+Cypress offers a rich interactive interface for running E2E tests in Firefox and Chromium based browsers (Chrome, MS Edge, Brave, Electron). To learn more about cross browser testing, visit the [Cypress Cross Browser Testing Guide](https://on.cypress.io/cross-browser-testing).
+
+> **Note:** If you have a hard requirement on E2E testing in IE or Safari, 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
@@ -12,7 +14,7 @@ Cypress offers a rich interactive interface for running E2E tests, but currently
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.
+ By default it launches Cypress in interactive mode with a GUI (via `cypress open`). 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.
diff --git a/docs/core-plugins/eslint.md b/docs/core-plugins/eslint.md
index bb9037b9a7..2517719a39 100644
--- a/docs/core-plugins/eslint.md
+++ b/docs/core-plugins/eslint.md
@@ -15,17 +15,17 @@
--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)
+ --output-file specify file to write report to
```
Lints and fixes files. If no specific files are given, it lints all files in `src` and `tests`, as well as all JavaScript files in the root directory (these are most often config files such as `babel.config.js` or `.eslintrc.js`).
-Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported.
-
+Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are not supported.
+
::: tip
`vue-cli-service lint` will lint dotfiles `.*.js` by default. If you want to follow ESLint's default behavior instead, consider adding a `.eslintignore` file in your project.
:::
-
## Configuration
ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`. See the [ESLint configuration docs](https://eslint.org/docs/user-guide/configuring) for more detail.
diff --git a/docs/core-plugins/pwa.md b/docs/core-plugins/pwa.md
index 4457c4357e..3102dfea75 100644
--- a/docs/core-plugins/pwa.md
+++ b/docs/core-plugins/pwa.md
@@ -96,6 +96,7 @@ file, or the `"vue"` field in `package.json`.
```js
{
+ faviconSVG: 'img/icons/favicon.svg',
favicon32: 'img/icons/favicon-32x32.png',
favicon16: 'img/icons/favicon-16x16.png',
appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
diff --git a/docs/core-plugins/typescript.md b/docs/core-plugins/typescript.md
index c466d2f537..393c704051 100644
--- a/docs/core-plugins/typescript.md
+++ b/docs/core-plugins/typescript.md
@@ -12,10 +12,6 @@ Since `3.0.0-rc.6`, `typescript` is now a peer dependency of this package, so yo
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`.
diff --git a/docs/core-plugins/webpack-4.md b/docs/core-plugins/webpack-4.md
new file mode 100644
index 0000000000..eceaf75ea6
--- /dev/null
+++ b/docs/core-plugins/webpack-4.md
@@ -0,0 +1,3 @@
+# @vue/cli-plugin-webpack-4
+
+This plugin provides compatibily for webpack 4 in Vue CLI 5.
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 68accb50bf..620cbd3980 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -11,7 +11,6 @@ This documentation is for `@vue/cli`. For the old `vue-cli`, see [here](https://
Vue CLI is a full system for rapid Vue.js development, providing:
- Interactive project scaffolding via `@vue/cli`.
-- Zero config rapid prototyping via `@vue/cli` + `@vue/cli-service-global`.
- A runtime dependency (`@vue/cli-service`) that is:
- Upgradeable;
- Built on top of webpack, with sensible defaults;
@@ -28,7 +27,7 @@ There are several moving parts of Vue CLI - if you look at the [source code](htt
### CLI
-The CLI (`@vue/cli`) is a globally installed npm package and provides the `vue` command in your terminal. It provides the ability to quickly scaffold a new project via `vue create`, or instantly prototype new ideas via `vue serve`. You can also manage your projects using a graphical user interface via `vue ui`. We will walk through what it can do in the next few sections of the guide.
+The CLI (`@vue/cli`) is a globally installed npm package and provides the `vue` command in your terminal. It provides the ability to quickly scaffold a new project via `vue create`. You can also manage your projects using a graphical user interface via `vue ui`. We will walk through what it can do in the next few sections of the guide.
### CLI Service
diff --git a/docs/guide/cli-service.md b/docs/guide/cli-service.md
index 59eb2fcb79..a5e3a90111 100644
--- a/docs/guide/cli-service.md
+++ b/docs/guide/cli-service.md
@@ -81,7 +81,7 @@ Options:
--inline-vue include the Vue module in the final bundle of library or web component target
--name name for lib or web-component mode (default: "name" in package.json or entry filename)
--filename file name for output, only usable for 'lib' target (default: value of --name),
- --no-clean do not remove the dist directory before building the project
+ --no-clean do not remove the dist directory contents before building the project
--report generate report.html to help analyze bundle content
--report-json generate report.json to help analyze bundle content
--skip-plugins comma-separated list of plugin names to skip for this run
@@ -169,10 +169,7 @@ When installed, `@vue/cli-service` also installs [yorkie](https://github.com/yyx
"pre-commit": "lint-staged"
},
"lint-staged": {
- "*.{js,vue}": [
- "vue-cli-service lint",
- "git add"
- ]
+ "*.{js,vue}": "vue-cli-service lint"
}
}
```
diff --git a/docs/guide/css.md b/docs/guide/css.md
index a8f297224d..424395f3a2 100644
--- a/docs/guide/css.md
+++ b/docs/guide/css.md
@@ -21,6 +21,15 @@ npm install -D less-loader less
npm install -D stylus-loader stylus
```
+::: tip Note on webpack 4
+When using `webpack` version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with `webpack` 4.
+
+``` bash
+# Sass
+npm install -D sass-loader@^10 sass
+```
+:::
+
Then you can import the corresponding file types, or use them in `*.vue` files with:
``` vue
diff --git a/docs/guide/prototyping.md b/docs/guide/prototyping.md
index 4c083ed5d3..2e4e7fd467 100644
--- a/docs/guide/prototyping.md
+++ b/docs/guide/prototyping.md
@@ -1,73 +1,5 @@
# Instant Prototyping
-You can rapidly prototype with just a single `*.vue` file with the `vue serve` and `vue build` commands, but they require a global addon to be installed along with the Vue CLI:
+Removed in v5. We recommend you to use [vite](https://github.com/vitejs/vite/#readme) for Vue component prototyping.
-``` bash
-npm install -g @vue/cli @vue/cli-service-global
-# or
-yarn global add @vue/cli @vue/cli-service-global
-```
-
-The drawback of `vue serve` is that it relies on globally installed dependencies which may be inconsistent on different machines. Therefore this is only recommended for rapid prototyping.
-
-### vue serve
-
-```
-Usage: serve [options] [entry]
-
-serve a .js or .vue file in development mode with zero config
-
-
-Options:
-
- -o, --open Open browser
- -c, --copy Copy local url to clipboard
- -p, --port Port used by the server (default: 8080 or next available port)
- -h, --help Output usage information
-```
-
-All you need is an `App.vue` file:
-
-``` vue
-
-
Hello!
-
-```
-
-Then in the directory with the `App.vue` file, run:
-
-``` bash
-vue serve
-```
-
-`vue serve` uses the same default setup (webpack, babel, postcss & eslint) as projects created by `vue create`. It automatically infers the entry file in the current directory - the entry can be one of `main.js`, `index.js`, `App.vue` or `app.vue`. You can also explicitly specify the entry file:
-
-``` bash
-vue serve MyComponent.vue
-```
-
-If needed, you can also provide an `index.html`, `package.json`, install and use local dependencies, or even configure babel, postcss & eslint with corresponding config files.
-
-### vue build
-
-```
-Usage: build [options] [entry]
-
-build a .js or .vue file in production mode with zero config
-
-
-Options:
-
- -t, --target Build target (app | lib | wc | wc-async, default: app)
- -n, --name name for lib or web-component (default: entry filename)
- -d, --dest output directory (default: dist)
- -h, --help output usage information
-```
-
-You can also build the target file into a production bundle for deployment with `vue build`:
-
-``` bash
-vue build MyComponent.vue
-```
-
-`vue build` also provides the ability to build the component as a library or a web component. See [Build Targets](./build-targets.md) for more details.
+If you are using `@vue/cli` v4, please visit for the documentation.
diff --git a/docs/migrating-from-v3/README.md b/docs/migrations/migrate-from-v3.md
similarity index 99%
rename from docs/migrating-from-v3/README.md
rename to docs/migrations/migrate-from-v3.md
index 3ca517ceb4..603a4f1613 100644
--- a/docs/migrating-from-v3/README.md
+++ b/docs/migrations/migrate-from-v3.md
@@ -2,7 +2,7 @@
sidebar: auto
---
-# Migrating from v3
+# Migrate from v3
First, install the latest Vue CLI globally:
diff --git a/docs/migrations/migrate-from-v4.md b/docs/migrations/migrate-from-v4.md
new file mode 100644
index 0000000000..f41a5ea13f
--- /dev/null
+++ b/docs/migrations/migrate-from-v4.md
@@ -0,0 +1,130 @@
+---
+sidebar: auto
+---
+
+# Migrate from v4
+
+First, install the latest Vue CLI globally:
+
+```sh
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+## Upgrade All Plugins at Once
+
+In your existing projects, run:
+
+```sh
+vue upgrade
+```
+
+And then follow the command line instructions.
+
+See the following section for detailed breaking changes introduced in each package.
+
+------
+
+## One-By-One Manual Migration
+
+If you want to migrate manually and gradually, you can run `vue upgrade ` to upgrade a specific Vue CLI plugin.
+
+------
+
+## Breaking Changes
+
+### For All Packages
+
+* Drop support of Node.js 8, 11, 13
+* Drop support of NPM 5
+
+### The `vue` Command (The Global `@vue/cli` Package)
+
+The [instant prototyping functionalities](https://v4.cli.vuejs.org/guide/prototyping.html) are removed. Now the `vue serve` / `vue build` commands are aliases to `npm run serve` / `npm run build`, which in turn execute the scripts specified in the project `package.json`.
+
+If you need a minimum setup for developing standalone `.vue` components, please use [`vite`](https://github.com/vitejs/vite/#readme) instead.
+
+### `@vue/cli-service`
+
+#### Webpack 5
+
+We've upgraded the underlying webpack version to 5. There are plenty of breaking changes underlyingly, listed in the release announcement page [Webpack 5 release (2020-10-10)](https://webpack.js.org/blog/2020-10-10-webpack-5-release/).
+
+Besides the internal changes that are only noticeable for custom configurations, there're several notable changes for user-land code too:
+
+1. Named exports from JSON modules are no longer supported. Instead of `import { version } from './package.json'; console.log(version);` use `import package from './package.json'; console.log(package.version);`
+2. Webpack 5 does no longer include polyfills for Node.js modules by default. You shall see an informative error message if your code relies on any of these modules. A detailed list of previously polyfilled modules is also available [here](https://github.com/webpack/webpack/pull/8460/commits/a68426e9255edcce7822480b78416837617ab065).
+
+#### Opt Out to Webpack 4
+
+Considering many ecosystem packages haven't catched up yet, we provided a plugin to opt out to webpack 4 for easier migration.
+
+It's as simple as running
+
+```sh
+vue add webpack-4
+```
+
+at the project root.
+
+Underlyingly, it uses the [`resolutions`](https://classic.yarnpkg.com/en/docs/selective-version-resolutions) field for Yarn and PNPM users, and [`module-alias`](https://github.com/ilearnio/module-alias) for NPM users.
+
+Though both work in all our tests, please be aware that the `module-alias` approach is still considered hacky, and may not be as stable as the `"resolutions"` one.
+
+#### Sass/SCSS
+
+No longer supports generating project with `node-sass`. It has been [deprecated](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) for a while. Please use the `sass` package instead.
+
+#### Underlying Loaders and Plugins
+
+* `html-webpack-plugin` is upgraded from v3 to v4, see more details in the [release announcement](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d).
+* `sass-loader` v7 support is dropped. See the v8 breaking changes at its [changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#800-2019-08-29).
+* `postcss-loader` is upgraded from v3 to v4. Most notably, `PostCSS` options (`plugin` / `syntax` / `parser` / `stringifier`) are moved into the `postcssOptions` field. More details available at the [changelog](https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md#400-2020-09-07).
+* `copy-webpack-plugin` is upgraded from v5 to v6. If you never customized its config through `config.plugin('copy')`, there should be no user-facing breaking changes. A full list of breaking changes is available at [`copy-webpack-plugin` v6.0.0 release](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.0.0).
+* `file-loader` is upgraded from v4 to v6, and `url-loader` from v2 to v4. The `esModule` option is now turned on by default for non-Vue-2 projects. Full changelog available at [`file-loader` changelog](https://github.com/webpack-contrib/file-loader/blob/master/CHANGELOG.md) and [`url-loader` changelog](https://github.com/webpack-contrib/url-loader/blob/master/CHANGELOG.md)
+* `terser-webpack-plugin` is upgraded from v2 to v4, using terser 5 and some there are some changes in the options format. See full details in its [changelog](https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md#400-2020-08-04).
+
+### ESLint Plugin
+
+* `eslint-loader` is replaced by [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin), dropping support for ESLint <= 6.
+* New projects are now generated with `eslint-plugin-vue` v7, see its [release notes](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.0.0) for breaking changes.
+
+### PWA Plugin
+
+* The underlying `workbox-webpack-plugin` is upgraded from v4 to v6. Detailed migration guides available on workbox's website:
+ * [From Workbox v4 to v5](https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v4)
+ * [From Workbox v5 to v6](https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v5)
+
+### TypeScript Plugin
+
+* Dropped TSLint support. As [TSLint has been deprecated](https://github.com/palantir/tslint/issues/4534), we [removed](https://github.com/vuejs/vue-cli/pull/5065) all TSLint-related code in this version.
+Please consider switching to ESLint. You can check out [`tslint-to-eslint-config`](https://github.com/typescript-eslint/tslint-to-eslint-config) for a mostly automatic migration experience.
+* `ts-loader` is upgraded from v6 to v8. It now only supports TypeScript >= 3.6.
+* `fork-ts-checker-webpack-plugin` is upgraded from v3.x to v6.x, you can see the detailed breaking changes in its release notes:
+ * [v4.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v4.0.0)
+ * [v5.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v5.0.0)
+ * [v6.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v6.0.0)
+
+### E2E-Cypress Plugin
+
+* Cypress is required as a peer dependency.
+* Cypress is updated from v3 to v6. See [Cypress Migration Guide](https://docs.cypress.io/guides/references/migration-guide.html) for detailed instructions of the migration process.
+
+### Unit-Jest Plugin
+
+* The underlying `jest`-related packages are upgraded from v24 to v26. For most users the transition would be seamless. See their corresponding changelogs for more detail:
+ * [jest, babel-jest](https://github.com/facebook/jest/blob/v26.6.3/CHANGELOG.md)
+ * [ts-jest](https://github.com/kulshekhar/ts-jest/blob/v26.4.4/CHANGELOG.md)
+
+### Unit-Mocha Plugin
+
+* `mocha` is upgraded from v6 to v8, please refer to the release notes of [mocha v7](https://github.com/mochajs/mocha/releases/tag/v7.0.0) and [mocha v8](https://github.com/mochajs/mocha/releases/tag/v8.0.0) for a complete list of breaking changes.
+* `jsdom` is upgraded from v15 to v16, the breaking changes are listed at [`jsdom` v16.0.0 release](https://github.com/jsdom/jsdom/releases/tag/16.0.0)
+
+### Internal Packages
+
+#### `@vue/cli-shared-utils`
+
+* [chalk](https://github.com/chalk/chalk) is upgraded from v2 to v4
+* [joi](https://github.com/sideway/joi) is upgraded from v15 (used to be `@hapi/joi`) to v17
diff --git a/docs/ru/core-plugins/typescript.md b/docs/ru/core-plugins/typescript.md
index b5c9c47a07..779749d435 100644
--- a/docs/ru/core-plugins/typescript.md
+++ b/docs/ru/core-plugins/typescript.md
@@ -12,10 +12,6 @@ TypeScript может быть сконфигурирован через `tsconf
Этот плагин может использоваться вместе с `@vue/cli-plugin-babel`. При использовании вместе с Babel, этот плагин должен генерировать ES2015 и делегировать остальное Babel для автоматического добавления полифилов на основе целевых браузеров.
-## Внедряемые команды
-
-При выборе [TSLint](https://palantir.github.io/tslint/) на этапе создания проекта, будет внедряться команда `vue-cli-service lint`.
-
## Кэширование
[cache-loader](https://github.com/webpack-contrib/cache-loader) используется по умолчанию, кэш хранится в `/node_modules/.cache/ts-loader`.
diff --git a/docs/ru/guide/cli-service.md b/docs/ru/guide/cli-service.md
index 35eeea09e5..bca0c08064 100644
--- a/docs/ru/guide/cli-service.md
+++ b/docs/ru/guide/cli-service.md
@@ -166,10 +166,7 @@ npx vue-cli-service build --skip-plugins @vue/cli-plugin-pwa
"pre-commit": "lint-staged"
},
"lint-staged": {
- "*.{js,vue}": [
- "vue-cli-service lint",
- "git add"
- ]
+ "*.{js,vue}": "vue-cli-service lint"
}
}
```
diff --git a/docs/zh/config/README.md b/docs/zh/config/README.md
index 8843a6bd96..752d3e5015 100644
--- a/docs/zh/config/README.md
+++ b/docs/zh/config/README.md
@@ -28,7 +28,7 @@ module.exports = {
```
### baseUrl
-从 Vue CLI 3.3 起已弃用，请使用[`publicPath`](#publicPath)。
+从 Vue CLI 3.3 起已弃用，请使用[`publicPath`](#publicpath)。
### publicPath
@@ -65,7 +65,7 @@ module.exports = {
- Type: `string`
- Default: `'dist'`
- 当运行 `vue-cli-service build` 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 `--no-clean` 可关闭该行为)。
+ 当运行 `vue-cli-service build` 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除 (构建时传入 `--no-clean` 可关闭该行为)。
::: tip 提示
请始终使用 `outputDir` 而不要修改 webpack 的 `output.path`。
diff --git a/docs/zh/guide/cli-service.md b/docs/zh/guide/cli-service.md
index f8bcd337fa..f0e594ebfc 100644
--- a/docs/zh/guide/cli-service.md
+++ b/docs/zh/guide/cli-service.md
@@ -56,7 +56,7 @@ npx vue-cli-service serve
除了通过命令行参数，你也可以使用 `vue.config.js` 里的 [devServer](../config/#devserver) 字段配置开发服务器。
-命令行参数 `[entry]` 将被指定为唯一入口，而非额外的追加入口。尝试使用 `[entry]` 覆盖 `config.pages` 中的 `entry` 将可能引发错误。
+命令行参数 `[entry]` 将被指定为唯一入口 (默认值：`src/main.js`，TypeScript 项目则为 `src/main.ts`)，而非额外的追加入口。尝试使用 `[entry]` 覆盖 `config.pages` 中的 `entry` 将可能引发错误。
## vue-cli-service build
@@ -70,7 +70,7 @@ npx vue-cli-service serve
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值：app)
--name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
- --no-clean 在构建项目之前不清除目标目录
+ --no-clean 在构建项目之前不清除目标目录的内容
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
@@ -128,10 +128,7 @@ npx vue-cli-service help [command]
"pre-commit": "lint-staged"
},
"lint-staged": {
- "*.{js,vue}": [
- "vue-cli-service lint",
- "git add"
- ]
+ "*.{js,vue}": "vue-cli-service lint"
}
}
```
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..33dfde8250
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ 'testEnvironment': 'node',
+ 'setupFiles': [
+ '/scripts/testSetup.js'
+ ],
+ 'testMatch': [
+ '**/__tests__/**/*.spec.js'
+ ]
+}
+
+if (process.env.VUE_CLI_USE_WEBPACK4) {
+ module.exports.moduleNameMapper = {
+ '^webpack$': 'webpack-4',
+ '^webpack/(.*)': 'webpack-4/$1'
+ }
+}
diff --git a/lerna.json b/lerna.json
index ba6ede363b..a7f4959bf4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,7 +1,7 @@
{
"npmClient": "yarn",
"useWorkspaces": true,
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"packages": [
"packages/@vue/babel-preset-app",
"packages/@vue/cli*",
diff --git a/package.json b/package.json
index f0d68b6ec8..ef7ae2c2bc 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"lint-without-fix": "eslint packages/**/*.js packages/**/bin/*",
"check-links": "node scripts/checkLinks.js",
"clean": "rimraf packages/test/* packages/**/temp/*",
+ "clean-e2e": "rimraf /tmp/verdaccio-workspace",
"sync": "node scripts/syncDeps.js",
"boot": "node scripts/bootstrap.js",
"release": "yarn --pure-lockfile && yarn clean && node scripts/release.js",
@@ -24,74 +25,58 @@
"pre-commit": "lint-staged",
"commit-msg": "node scripts/verifyCommitMsg.js"
},
- "jest": {
- "testEnvironment": "node",
- "setupFiles": [
- "/scripts/testSetup.js"
- ],
- "testMatch": [
- "**/__tests__/**/*.spec.js"
- ]
- },
"lint-staged": {
- "*.{js,vue}": [
- "eslint --fix",
- "git add"
- ],
- "packages/**/bin/*": [
- "eslint --fix",
- "git add"
- ]
+ "*.{js,vue}": "eslint --fix",
+ "packages/**/bin/*": "eslint --fix"
},
"devDependencies": {
- "@babel/core": "^7.11.0",
- "@typescript-eslint/eslint-plugin": "^2.33.0",
- "@typescript-eslint/parser": "^2.33.0",
- "@vue/eslint-config-airbnb": "^5.0.2",
+ "@babel/core": "^7.12.10",
+ "@babel/eslint-parser": "^7.12.1",
+ "@typescript-eslint/eslint-plugin": "^4.9.1",
+ "@typescript-eslint/parser": "^4.9.1",
+ "@vue/eslint-config-airbnb": "^5.3.0",
"@vue/eslint-config-prettier": "^6.0.0",
- "@vue/eslint-config-standard": "^5.1.2",
- "@vue/eslint-config-typescript": "^5.0.2",
- "@vuepress/plugin-pwa": "^1.5.0",
- "@vuepress/theme-vue": "^1.5.0",
+ "@vue/eslint-config-standard": "^6.0.0",
+ "@vue/eslint-config-typescript": "^7.0.0",
+ "@vuepress/plugin-pwa": "^1.5.4",
+ "@vuepress/theme-vue": "^1.5.4",
"babel-core": "7.0.0-bridge.0",
- "babel-eslint": "^10.1.0",
- "babel-jest": "^24.9.0",
- "chromedriver": "^84.0.1",
+ "babel-jest": "^26.6.3",
+ "chromedriver": "^87.0.2",
"debug": "^4.1.0",
- "eslint": "^6.7.2",
- "eslint-plugin-graphql": "^3.1.0",
+ "eslint": "^7.15.0",
+ "eslint-plugin-graphql": "^4.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
- "eslint-plugin-prettier": "^3.1.3",
+ "eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-promise": "^4.2.1",
- "eslint-plugin-standard": "^4.0.0",
- "eslint-plugin-vue": "^6.2.2",
- "eslint-plugin-vue-libs": "^4.0.0",
+ "eslint-plugin-vue": "^7.2.0",
"execa": "^1.0.0",
"geckodriver": "^1.20.0",
- "globby": "^9.2.0",
- "graphql": "^14.6.0",
+ "globby": "^11.0.1",
+ "graphql": "^15.4.0",
"http-server": "^0.12.3",
"inquirer": "^7.1.0",
- "jest": "^24.9.0",
+ "jest": "^26.6.3",
"lerna": "^3.22.0",
- "lerna-changelog": "^0.8.3",
- "lint-staged": "^9.5.0",
+ "lerna-changelog": "^1.0.1",
+ "lint-staged": "^10.5.3",
"memfs": "^3.2.0",
"minimist": "^1.2.5",
+ "node-fetch": "^2.6.1",
"prettier": ">= 1.13.0",
- "request": "^2.88.2",
- "request-promise-native": "^1.0.8",
"rimraf": "^3.0.2",
- "semver": "^6.1.0",
- "typescript": "~3.9.3",
- "vuepress": "^1.5.0",
- "webpack": "^4.0.0",
+ "semver": "^7.3.4",
+ "stylus-loader": "^3.0.2",
+ "typescript": "~4.1.2",
+ "verdaccio": "^4.10.0",
+ "vuepress": "^1.6.0",
+ "webpack": "^5.10.0",
"yorkie": "^2.0.0"
},
"resolutions": {
"puppeteer": "1.11.0",
- "vue-template-compiler": "^2.6.11",
- "vue-server-renderer": "^2.6.11"
+ "vue-template-compiler": "^2.6.12",
+ "vue-server-renderer": "^2.6.12"
}
}
diff --git a/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js b/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js
index f8090aa2f0..d57f42b90d 100644
--- a/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js
+++ b/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js
@@ -29,7 +29,7 @@ test('polyfill detection', () => {
// default includes
expect(code).not.toMatch(getAbsolutePolyfill('es.promise'))
// usage-based detection
- expect(code).not.toMatch('"core-js/modules/es.map"')
+ expect(code).not.toMatch('core-js/modules/es.map')
;({ code } = babel.transformSync(`
const a = new Map()
@@ -45,7 +45,7 @@ test('polyfill detection', () => {
// promise polyfill alone doesn't work in IE, needs this as well. fix: #1642
expect(code).toMatch(getAbsolutePolyfill('es.array.iterator'))
// usage-based detection
- expect(code).toMatch('"core-js/modules/es.map"')
+ expect(code).toMatch('core-js/modules/es.map')
})
test('modern mode always skips unnecessary polyfills', () => {
@@ -67,7 +67,7 @@ test('modern mode always skips unnecessary polyfills', () => {
// (modern: safari >= 10.1, es.promise: safrai >= 11)
// the custom configuration only expects to support safari >= 12
// so it can be skipped
- expect(code).not.toMatch('es.promise"')
+ expect(code).not.toMatch('es.promise[^.]')
// es.promise.finally is supported in safari >= 13.0.3
// so still needs to be included
expect(code).toMatch('es.promise.finally')
@@ -89,10 +89,10 @@ test('modern mode always skips unnecessary polyfills', () => {
filename: 'test-entry-file.js'
}))
// default includes
- expect(code).not.toMatch('es.promise"')
+ expect(code).not.toMatch('es.promise[^.]')
expect(code).not.toMatch('es.promise.finally')
// usage-based detection
- expect(code).not.toMatch('"core-js/modules/es.map"')
+ expect(code).not.toMatch('core-js/modules/es.map')
expect(code).not.toMatch('es.global-this')
delete process.env.VUE_CLI_MODERN_BUILD
})
@@ -120,7 +120,7 @@ test('async/await', () => {
`.trim(), defaultOptions)
expect(code).toMatch(getAbsolutePolyfill('es.promise'))
// should use regenerator runtime
- expect(code).toMatch(`"regenerator-runtime/runtime"`)
+ expect(code).toMatch(`regenerator-runtime/runtime`)
})
test('jsx', () => {
@@ -166,7 +166,7 @@ test('disable absoluteRuntime', () => {
filename: 'test-entry-file.js'
})
- expect(code).toMatch('"@babel/runtime/helpers/toConsumableArray"')
+ expect(code).toMatch('@babel/runtime/helpers/toConsumableArray')
expect(code).not.toMatch(getAbsolutePolyfill('es.promise'))
})
@@ -187,8 +187,8 @@ test('should inject polyfills / helpers using "require" statements for a umd mod
}]],
filename: 'test-entry-file.js'
})
- expect(code).toMatch('require("@babel/runtime/helpers/toConsumableArray")')
- expect(code).toMatch('require("core-js/modules/es.promise")')
+ expect(code).toMatch('require("@babel/runtime/helpers/toConsumableArray')
+ expect(code).toMatch('require("core-js/modules/es.promise')
expect(code).not.toMatch('import ')
})
@@ -205,8 +205,8 @@ test('should inject polyfills / helpers using "import" statements for an es modu
filename: 'test-entry-file.js'
})
- expect(code).toMatch('import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"')
- expect(code).toMatch('import "core-js/modules/es.promise"')
+ expect(code).toMatch('import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray')
+ expect(code).toMatch('import "core-js/modules/es.promise')
expect(code).not.toMatch('require(')
})
diff --git a/packages/@vue/babel-preset-app/index.js b/packages/@vue/babel-preset-app/index.js
index a87ebfbbef..f2f712cc87 100644
--- a/packages/@vue/babel-preset-app/index.js
+++ b/packages/@vue/babel-preset-app/index.js
@@ -259,13 +259,13 @@ module.exports = (context, options = {}) => {
return {
sourceType: 'unambiguous',
overrides: [{
- exclude: [/@babel[\/|\\\\]runtime/, /core-js/],
+ exclude: [/@babel[/|\\\\]runtime/, /core-js/],
presets,
plugins
}, {
// there are some untranspiled code in @babel/runtime
// https://github.com/babel/babel/issues/9903
- include: [/@babel[\/|\\\\]runtime/],
+ include: [/@babel[/|\\\\]runtime/],
presets: [
[require('@babel/preset-env'), envOptions]
]
diff --git a/packages/@vue/babel-preset-app/package.json b/packages/@vue/babel-preset-app/package.json
index fcda2bda33..ddf88bed1f 100644
--- a/packages/@vue/babel-preset-app/package.json
+++ b/packages/@vue/babel-preset-app/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/babel-preset-app",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "babel-preset-app for vue-cli",
"main": "index.js",
"publishConfig": {
@@ -22,22 +22,22 @@
},
"homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/babel-preset-app#readme",
"dependencies": {
- "@babel/core": "^7.11.0",
+ "@babel/core": "^7.12.10",
"@babel/helper-compilation-targets": "^7.9.6",
"@babel/helper-module-imports": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.8.3",
- "@babel/plugin-transform-runtime": "^7.11.0",
- "@babel/preset-env": "^7.11.0",
- "@babel/runtime": "^7.11.0",
+ "@babel/plugin-transform-runtime": "^7.12.0",
+ "@babel/preset-env": "^7.12.10",
+ "@babel/runtime": "^7.11.2",
"@vue/babel-plugin-jsx": "^1.0.0-0",
"@vue/babel-preset-jsx": "^1.1.2",
"babel-plugin-dynamic-import-node": "^2.3.3",
- "core-js": "^3.6.5",
- "core-js-compat": "^3.6.5",
- "semver": "^6.1.0"
+ "core-js": "^3.8.1",
+ "core-js-compat": "^3.8.1",
+ "semver": "^7.3.4"
},
"peerDependencies": {
"@babel/core": "*",
diff --git a/packages/@vue/cli-init/package.json b/packages/@vue/cli-init/package.json
index 15a5ef9b93..6167f6ec9a 100644
--- a/packages/@vue/cli-init/package.json
+++ b/packages/@vue/cli-init/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-init",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "init addon for vue-cli",
"main": "index.js",
"publishConfig": {
diff --git a/packages/@vue/cli-overlay/package.json b/packages/@vue/cli-overlay/package.json
index 5aa4c12b06..6d11c2e19c 100644
--- a/packages/@vue/cli-overlay/package.json
+++ b/packages/@vue/cli-overlay/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-overlay",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "error overlay & dev server middleware for vue-cli",
"main": "dist/client.js",
"files": [
diff --git a/packages/@vue/cli-plugin-babel/.npmignore b/packages/@vue/cli-plugin-babel/.npmignore
index e0b178a189..7fff37cad7 100644
--- a/packages/@vue/cli-plugin-babel/.npmignore
+++ b/packages/@vue/cli-plugin-babel/.npmignore
@@ -1,2 +1,3 @@
__tests__
__mocks__
+__testfixtures__
diff --git a/packages/@vue/cli-plugin-babel/README.md b/packages/@vue/cli-plugin-babel/README.md
index d5b5742f8a..70eea46f79 100644
--- a/packages/@vue/cli-plugin-babel/README.md
+++ b/packages/@vue/cli-plugin-babel/README.md
@@ -20,7 +20,7 @@ module.exports = {
## Caching
-[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`.
+Cache options of [babel-loader](https://github.com/babel/babel-loader#options) is enabled by default and cache is stored in `/node_modules/.cache/babel-loader`.
## Parallelization
@@ -38,4 +38,3 @@ vue add babel
- `config.rule('js')`
- `config.rule('js').use('babel-loader')`
-- `config.rule('js').use('cache-loader')`
diff --git a/packages/@vue/cli-plugin-babel/__tests__/babelRuntime.spec.js b/packages/@vue/cli-plugin-babel/__tests__/babelRuntime.spec.js
index 97ec8c4437..de56514f49 100644
--- a/packages/@vue/cli-plugin-babel/__tests__/babelRuntime.spec.js
+++ b/packages/@vue/cli-plugin-babel/__tests__/babelRuntime.spec.js
@@ -54,7 +54,7 @@ test('should not transpile babel helpers multiple times', async () => {
// #4742 core-js-pure imports are likely to be caused by
// incorrect configuration of @babel/plugin-transform-runtime
test('should not introduce polyfills from core-js-pure', async () => {
- const project = await create('babel-runtime-core-js-pure', defaultPreset)
+ const project = await create('babel-runtime-no-duplicate-core-js', defaultPreset)
await project.write('src/main.js', `
import Vue from 'vue'
diff --git a/packages/@vue/cli-plugin-babel/codemods/__tests__/usePluginPreset.spec.js b/packages/@vue/cli-plugin-babel/codemods/__tests__/usePluginPreset.spec.js
index d07395c8c4..2758b7a7b4 100644
--- a/packages/@vue/cli-plugin-babel/codemods/__tests__/usePluginPreset.spec.js
+++ b/packages/@vue/cli-plugin-babel/codemods/__tests__/usePluginPreset.spec.js
@@ -6,4 +6,3 @@ defineTest(__dirname, 'usePluginPreset', null, 'default')
defineTest(__dirname, 'usePluginPreset', null, 'customConfig')
defineTest(__dirname, 'usePluginPreset', null, 'require')
defineTest(__dirname, 'usePluginPreset', null, 'templateLiteral')
-
diff --git a/packages/@vue/cli-plugin-babel/generator.js b/packages/@vue/cli-plugin-babel/generator.js
index 45df9c90d4..faa0a790a5 100644
--- a/packages/@vue/cli-plugin-babel/generator.js
+++ b/packages/@vue/cli-plugin-babel/generator.js
@@ -10,7 +10,7 @@ module.exports = api => {
presets: ['@vue/cli-plugin-babel/preset']
},
dependencies: {
- 'core-js': '^3.6.5'
+ 'core-js': '^3.8.1'
}
})
}
diff --git a/packages/@vue/cli-plugin-babel/index.js b/packages/@vue/cli-plugin-babel/index.js
index e1e3f8e76f..1b1df4824e 100644
--- a/packages/@vue/cli-plugin-babel/index.js
+++ b/packages/@vue/cli-plugin-babel/index.js
@@ -12,10 +12,13 @@ function genTranspileDepRegex (transpileDependencies) {
} else if (dep instanceof RegExp) {
return dep.source
}
+
+ throw new Error('transpileDependencies only accepts an array of string or regular expressions')
})
return deps.length ? new RegExp(deps.join('|')) : null
}
+/** @type {import('@vue/cli-service').ServicePlugin} */
module.exports = (api, options) => {
const useThreads = process.env.NODE_ENV === 'production' && !!options.parallel
const cliServicePath = path.dirname(require.resolve('@vue/cli-service'))
@@ -61,19 +64,6 @@ module.exports = (api, options) => {
return /node_modules/.test(filepath)
})
.end()
- .use('cache-loader')
- .loader(require.resolve('cache-loader'))
- .options(api.genCacheConfig('babel-loader', {
- '@babel/core': require('@babel/core/package.json').version,
- '@vue/babel-preset-app': require('@vue/babel-preset-app/package.json').version,
- 'babel-loader': require('babel-loader/package.json').version,
- modern: !!process.env.VUE_CLI_MODERN_BUILD,
- browserslist: api.service.pkg.browserslist
- }, [
- 'babel.config.js',
- '.browserslistrc'
- ]))
- .end()
if (useThreads) {
const threadLoaderConfig = jsRule
@@ -88,5 +78,18 @@ module.exports = (api, options) => {
jsRule
.use('babel-loader')
.loader(require.resolve('babel-loader'))
+ .options({
+ cacheCompression: false,
+ ...api.genCacheConfig('babel-loader', {
+ '@babel/core': require('@babel/core/package.json').version,
+ '@vue/babel-preset-app': require('@vue/babel-preset-app/package.json').version,
+ 'babel-loader': require('babel-loader/package.json').version,
+ modern: !!process.env.VUE_CLI_MODERN_BUILD,
+ browserslist: api.service.pkg.browserslist
+ }, [
+ 'babel.config.js',
+ '.browserslistrc'
+ ])
+ })
})
}
diff --git a/packages/@vue/cli-plugin-babel/migrator/index.js b/packages/@vue/cli-plugin-babel/migrator/index.js
index 07a8b37248..867e9cef28 100644
--- a/packages/@vue/cli-plugin-babel/migrator/index.js
+++ b/packages/@vue/cli-plugin-babel/migrator/index.js
@@ -10,7 +10,7 @@ module.exports = api => {
api.extendPackage(
{
dependencies: {
- 'core-js': '^3.6.5'
+ 'core-js': '^3.8.1'
}
},
{ warnIncompatibleVersions: false }
diff --git a/packages/@vue/cli-plugin-babel/package.json b/packages/@vue/cli-plugin-babel/package.json
index 3407f3b1d4..c1a64254a0 100644
--- a/packages/@vue/cli-plugin-babel/package.json
+++ b/packages/@vue/cli-plugin-babel/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-babel",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "babel plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -20,19 +20,19 @@
},
"homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-babel#readme",
"dependencies": {
- "@babel/core": "^7.11.0",
- "@vue/babel-preset-app": "^4.5.7",
- "@vue/cli-shared-utils": "^4.5.7",
- "babel-loader": "^8.1.0",
- "cache-loader": "^4.1.0",
- "thread-loader": "^2.1.3",
- "webpack": "^4.0.0"
+ "@babel/core": "^7.12.10",
+ "@vue/babel-preset-app": "^5.0.0-alpha.3",
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3",
+ "babel-loader": "^8.2.2",
+ "thread-loader": "^3.0.0",
+ "webpack": "^5.10.0"
},
"peerDependencies": {
- "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
+ "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
},
"devDependencies": {
- "jscodeshift": "^0.10.0"
+ "@babel/preset-env": "^7.12.10",
+ "jscodeshift": "^0.11.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/@vue/cli-plugin-e2e-cypress/README.md b/packages/@vue/cli-plugin-e2e-cypress/README.md
index 4659a24528..e3e4792928 100644
--- a/packages/@vue/cli-plugin-e2e-cypress/README.md
+++ b/packages/@vue/cli-plugin-e2e-cypress/README.md
@@ -4,7 +4,9 @@
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).
+Cypress offers a rich interactive interface for running E2E tests in Firefox and Chromium based browsers (Chrome, MS Edge, Brave, Electron). To learn more about cross browser testing, visit the [Cypress Cross Browser Testing Guide](https://on.cypress.io/cross-browser-testing).
+
+> **Note:** If you have a hard requirement on E2E testing in IE or Safari, 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
@@ -12,7 +14,7 @@ Cypress offers a rich interactive interface for running E2E tests, but currently
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.
+ By default it launches Cypress in interactive mode with a GUI (via `cypress open`). 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.
diff --git a/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js b/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js
index a666c2ab29..d3c505cbdc 100644
--- a/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js
+++ b/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js
@@ -30,7 +30,6 @@ test('should work with TS', async () => {
plugins: {
'@vue/cli-plugin-typescript': {
'classComponent': true,
- 'tsLint': true,
'lintOn': ['save']
},
'@vue/cli-plugin-e2e-cypress': {}
diff --git a/packages/@vue/cli-plugin-e2e-cypress/index.js b/packages/@vue/cli-plugin-e2e-cypress/index.js
index 44c571ae3d..6b81b68de9 100644
--- a/packages/@vue/cli-plugin-e2e-cypress/index.js
+++ b/packages/@vue/cli-plugin-e2e-cypress/index.js
@@ -1,5 +1,5 @@
module.exports = (api, options) => {
- const { info, chalk, execa } = require('@vue/cli-shared-utils')
+ const { info, chalk, execa, resolveModule } = require('@vue/cli-shared-utils')
api.registerCommand('test:e2e', {
description: 'run e2e tests with Cypress',
@@ -31,7 +31,9 @@ module.exports = (api, options) => {
...rawArgs
]
- const cypressBinPath = require.resolve('cypress/bin/cypress')
+ // Use loadModule to allow users to customize their Cypress dependency version.
+ const cypressBinPath = resolveModule('cypress/bin/cypress', api.getCwd()) ||
+ resolveModule('cypress/bin/cypress', __dirname)
const runner = execa(cypressBinPath, cyArgs, { stdio: 'inherit' })
if (server) {
runner.on('exit', () => server.close())
diff --git a/packages/@vue/cli-plugin-e2e-cypress/package.json b/packages/@vue/cli-plugin-e2e-cypress/package.json
index 7f42be071b..0eca058440 100644
--- a/packages/@vue/cli-plugin-e2e-cypress/package.json
+++ b/packages/@vue/cli-plugin-e2e-cypress/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-e2e-cypress",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "e2e-cypress plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -23,11 +23,11 @@
"access": "public"
},
"dependencies": {
- "@vue/cli-shared-utils": "^4.5.7",
- "cypress": "^3.8.3",
- "eslint-plugin-cypress": "^2.10.3"
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3",
+ "cypress": "^6.1.0",
+ "eslint-plugin-cypress": "^2.11.2"
},
"peerDependencies": {
- "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
+ "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
}
}
diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js b/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js
index 0eab736cff..a27daf6ac4 100644
--- a/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js
+++ b/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js
@@ -42,23 +42,27 @@ describe('nightwatch e2e plugin', () => {
})
test('should accept the --url cli option', async () => {
- await project.run(`vue-cli-service build`)
- const server = createServer({ root: path.join(project.dir, 'dist') })
- await new Promise((resolve, reject) => {
- server.listen(8080, err => {
- if (err) return reject(err)
- resolve()
+ let server
+ try {
+ await project.run(`vue-cli-service build`)
+ server = createServer({ root: path.join(project.dir, 'dist') })
+ await new Promise((resolve, reject) => {
+ server.listen(8080, err => {
+ if (err) return reject(err)
+ resolve()
+ })
})
- })
- await project.run(`vue-cli-service test:e2e --headless --url http://127.0.0.1:8080/`)
- server.close()
-
- let results = await project.read('test_results.json')
- results = JSON.parse(results)
- expect(Object.keys(results.modules)).toEqual([
- 'test-with-pageobjects',
- 'test'
- ])
+ await project.run(`vue-cli-service test:e2e --headless --url http://127.0.0.1:8080/`)
+
+ let results = await project.read('test_results.json')
+ results = JSON.parse(results)
+ expect(Object.keys(results.modules)).toEqual([
+ 'test-with-pageobjects',
+ 'test'
+ ])
+ } finally {
+ server && server.close()
+ }
})
test('should run single test with custom nightwatch.json', async () => {
diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js b/packages/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js
index a5406d8829..4071a3aa19 100644
--- a/packages/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js
+++ b/packages/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js
@@ -33,7 +33,7 @@ const defaultSettings = {
test_settings: {
default: {
detailed_output: !concurrentMode,
- launch_url: '${VUE_DEV_SERVER_URL}'
+ launch_url: '${VUE_DEV_SERVER_URL}' // eslint-disable-line no-template-curly-in-string
},
chrome: {
@@ -56,10 +56,12 @@ const defaultSettings = {
}
}
},
- webdriver: useSelenium ? {} : {
- server_path: geckodriver.path,
- port: 4444
- }
+ webdriver: useSelenium
+ ? {}
+ : {
+ server_path: geckodriver.path,
+ port: 4444
+ }
}
}
}
diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/package.json b/packages/@vue/cli-plugin-e2e-nightwatch/package.json
index 2049e3cfcb..bec0d00a3e 100644
--- a/packages/@vue/cli-plugin-e2e-nightwatch/package.json
+++ b/packages/@vue/cli-plugin-e2e-nightwatch/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-e2e-nightwatch",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "e2e-nightwatch plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -23,17 +23,17 @@
"access": "public"
},
"dependencies": {
- "@vue/cli-shared-utils": "^4.5.7",
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3",
"deepmerge": "^4.2.2",
- "nightwatch": "^1.3.5"
+ "nightwatch": "^1.4.1"
},
"devDependencies": {
- "chromedriver": "^84.0.1",
+ "chromedriver": "^87.0.2",
"geckodriver": "^1.20.0",
"selenium-server": "^3.141.59"
},
"peerDependencies": {
- "@vue/cli-service": "^3.0.0 || ^4.0.0-0",
+ "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
"chromedriver": "*",
"geckodriver": "*",
"selenium-server": "^3.141.59"
diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioGenerator.spec.js b/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioGenerator.spec.js
new file mode 100644
index 0000000000..30f7661d5f
--- /dev/null
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioGenerator.spec.js
@@ -0,0 +1,23 @@
+jest.setTimeout(process.env.APPVEYOR ? 120000 : 60000)
+
+const create = require('@vue/cli-test-utils/createTestProject')
+
+test('should add types to existing tsconfig.json', async () => {
+ const { dir, read, write } = await create('e2e-webdriverio-tsconfig', {
+ plugins: {
+ '@vue/cli-plugin-typescript': {},
+ '@vue/cli-plugin-e2e-webdriverio': {
+ webdrivers: ['chrome']
+ }
+ }
+ })
+ await write('tsconfig.json', JSON.stringify({ compilerOptions: { types: ['some-type'] } }))
+
+ const invoke = require('@vue/cli/lib/invoke')
+ await invoke('e2e-webdriverio', { webdrivers: ['chrome'] }, dir)
+
+ const tsconfig = await read('tsconfig.json')
+ expect(tsconfig).toMatch(/\r?\n$/)
+ expect(JSON.parse(tsconfig).compilerOptions.types)
+ .toEqual(['some-type', 'mocha', '@wdio/mocha-framework', '@wdio/sync'])
+})
diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioPlugin.spec.js b/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioPlugin.spec.js
index 8019cc9f43..c68db254f8 100644
--- a/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioPlugin.spec.js
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioPlugin.spec.js
@@ -28,7 +28,6 @@ test('should work with TS', async () => {
plugins: {
'@vue/cli-plugin-typescript': {
'classComponent': true,
- 'tsLint': true,
'lintOn': ['save']
},
'@vue/cli-plugin-e2e-webdriverio': {
diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js b/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js
index 69879d0611..61a14d0e62 100644
--- a/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js
@@ -3,7 +3,7 @@ const { installedBrowsers } = require('@vue/cli-shared-utils')
const applyTS = module.exports.applyTS = (api, invoking) => {
api.extendPackage({
devDependencies: {
- '@types/mocha': '^8.0.1'
+ '@types/mocha': require('../package.json').dependencies['@types/mocha']
}
})
@@ -21,7 +21,7 @@ const applyTS = module.exports.applyTS = (api, invoking) => {
}
}
}
- files['tsconfig.json'] = JSON.stringify(parsed, null, 2)
+ files['tsconfig.json'] = JSON.stringify(parsed, null, 2) + '\n'
}
})
}
diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/_eslintrc.js b/packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/_eslintrc.js
index f76db5387d..12152ccb68 100644
--- a/packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/_eslintrc.js
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/_eslintrc.js
@@ -6,6 +6,8 @@ module.exports = {
mocha: true
},
rules: {
+ 'class-methods-use-this': 'off',
+ 'max-len': 'off',
strict: 'off'
}
}
diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/package.json b/packages/@vue/cli-plugin-e2e-webdriverio/package.json
index a45613d3a1..754d21ffe5 100644
--- a/packages/@vue/cli-plugin-e2e-webdriverio/package.json
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-e2e-webdriverio",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "e2e-webdriverio plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -25,21 +25,21 @@
"access": "public"
},
"dependencies": {
- "@types/mocha": "^8.0.1",
- "@vue/cli-shared-utils": "^4.5.7",
- "@wdio/cli": "^6.1.11",
- "@wdio/local-runner": "^6.1.11",
- "@wdio/mocha-framework": "^6.1.8",
- "@wdio/sauce-service": "^6.1.9",
- "@wdio/spec-reporter": "^6.1.9",
- "@wdio/sync": "^6.1.8",
+ "@types/mocha": "^8.0.4",
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3",
+ "@wdio/cli": "^6.10.5",
+ "@wdio/local-runner": "^6.10.5",
+ "@wdio/mocha-framework": "^6.10.4",
+ "@wdio/sauce-service": "^6.10.4",
+ "@wdio/spec-reporter": "^6.8.1",
+ "@wdio/sync": "^6.10.4",
"eslint-plugin-wdio": "^6.0.12",
- "webdriverio": "^6.1.11"
+ "webdriverio": "^6.10.5"
},
"peerDependencies": {
"chromedriver": "*",
"geckodriver": "*",
- "wdio-chromedriver-service": "^6.0.3",
+ "wdio-chromedriver-service": "^6.0.4",
"wdio-geckodriver-service": "^1.1.0"
},
"peerDependenciesMeta": {
@@ -57,10 +57,10 @@
}
},
"devDependencies": {
- "chromedriver": "^84.0.1",
+ "chromedriver": "^87.0.2",
"geckodriver": "^1.20.0",
- "ts-node": "^8.10.2",
- "wdio-chromedriver-service": "^6.0.3",
+ "ts-node": "^9.1.1",
+ "wdio-chromedriver-service": "^6.0.4",
"wdio-geckodriver-service": "^1.1.0"
}
}
diff --git a/packages/@vue/cli-plugin-eslint/README.md b/packages/@vue/cli-plugin-eslint/README.md
index fd783e26f1..2517719a39 100644
--- a/packages/@vue/cli-plugin-eslint/README.md
+++ b/packages/@vue/cli-plugin-eslint/README.md
@@ -15,11 +15,16 @@
--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)
+ --output-file specify file to write report to
```
- Lints and fixes files. If no specific files are given, it lints all files in `src` and `tests`.
+Lints and fixes files. If no specific files are given, it lints all files in `src` and `tests`, as well as all JavaScript files in the root directory (these are most often config files such as `babel.config.js` or `.eslintrc.js`).
- Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported.
+Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are not supported.
+
+::: tip
+`vue-cli-service lint` will lint dotfiles `.*.js` by default. If you want to follow ESLint's default behavior instead, consider adding a `.eslintignore` file in your project.
+:::
## Configuration
diff --git a/packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js b/packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js
index 32bccb28aa..7996cde448 100644
--- a/packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js
+++ b/packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js
@@ -83,9 +83,26 @@ test('babel', async () => {
])
expect(pkg.scripts.lint).toBeTruthy()
- expect(pkg.devDependencies).toHaveProperty('babel-eslint')
+ expect(pkg.devDependencies).toHaveProperty('@babel/eslint-parser')
+ expect(pkg.devDependencies).toHaveProperty('@babel/core')
expect(pkg.eslintConfig.parserOptions).toEqual({
- parser: 'babel-eslint'
+ parser: '@babel/eslint-parser'
+ })
+})
+
+test('no-@babel/eslint-parser', async () => {
+ const { pkg } = await generateWithPlugin([
+ {
+ id: 'eslint',
+ apply: require('../generator'),
+ options: {}
+ }
+ ])
+
+ expect(pkg.devDependencies).not.toHaveProperty('@babel/eslint-parser')
+ expect(pkg.devDependencies).not.toHaveProperty('@babel/core')
+ expect(pkg.eslintConfig.parserOptions).not.toMatchObject({
+ parser: '@babel/eslint-parser'
})
})
@@ -140,7 +157,7 @@ test('lint on commit', async () => {
expect(pkg.gitHooks['pre-commit']).toBe('lint-staged')
expect(pkg.devDependencies).toHaveProperty('lint-staged')
expect(pkg['lint-staged']).toEqual({
- '*.{js,jsx,vue}': ['vue-cli-service lint', 'git add']
+ '*.{js,jsx,vue}': 'vue-cli-service lint'
})
expect(pkg.vue).toEqual({
lintOnSave: false
@@ -159,7 +176,7 @@ test('should lint ts files when typescript plugin co-exists', async () => {
const pkg = JSON.parse(await read('package.json'))
expect(pkg).toMatchObject({
'lint-staged': {
- '*.{js,jsx,vue,ts,tsx}': ['vue-cli-service lint', 'git add']
+ '*.{js,jsx,vue,ts,tsx}': 'vue-cli-service lint'
}
})
})
diff --git a/packages/@vue/cli-plugin-eslint/__tests__/eslintMigrator.spec.js b/packages/@vue/cli-plugin-eslint/__tests__/eslintMigrator.spec.js
index de39574006..130225f032 100644
--- a/packages/@vue/cli-plugin-eslint/__tests__/eslintMigrator.spec.js
+++ b/packages/@vue/cli-plugin-eslint/__tests__/eslintMigrator.spec.js
@@ -1,8 +1,6 @@
jest.setTimeout(300000)
-jest.mock('inquirer')
const create = require('@vue/cli-test-utils/createUpgradableProject')
-const { expectPrompts } = require('inquirer')
test('upgrade: should add eslint to devDependencies', async () => {
const project = await create('plugin-eslint-v3.0', {
@@ -16,20 +14,13 @@ test('upgrade: should add eslint to devDependencies', async () => {
const pkg = JSON.parse(await project.read('package.json'))
expect(pkg.devDependencies).not.toHaveProperty('eslint')
- expectPrompts([
- {
- message: `Your current ESLint version is v4`,
- confirm: false
- }
- ])
-
await project.upgrade('eslint')
const updatedPkg = JSON.parse(await project.read('package.json'))
- expect(updatedPkg.devDependencies.eslint).toMatch('^4')
+ expect(updatedPkg.devDependencies.eslint).toMatch('^7')
})
-test('upgrade: should upgrade eslint from v5 to v6', async () => {
+test('upgrade: should upgrade eslint from v5 to v7', async () => {
const project = await create('plugin-eslint-with-eslint-5', {
plugins: {
'@vue/cli-plugin-eslint': {
@@ -42,13 +33,6 @@ test('upgrade: should upgrade eslint from v5 to v6', async () => {
const pkg = JSON.parse(await project.read('package.json'))
expect(pkg.devDependencies.eslint).toMatch('^5')
- expectPrompts([
- {
- message: `Your current ESLint version is v5`,
- confirm: true
- }
- ])
-
try {
await project.upgrade('eslint')
} catch (e) {
@@ -59,6 +43,146 @@ test('upgrade: should upgrade eslint from v5 to v6', async () => {
}
const updatedPkg = JSON.parse(await project.read('package.json'))
- expect(updatedPkg.devDependencies.eslint).toMatch('^6')
+ expect(updatedPkg.devDependencies.eslint).toMatch('^7')
expect(updatedPkg.devDependencies).toHaveProperty('eslint-plugin-import')
})
+
+test.each([['3.12.1'], ['4.5.8']])('upgrade: replace babel-eslint with @babel/eslint-parser', async (version) => {
+ const project = await create('plugin-eslint-replace-babel-eslint' + version[0], {
+ plugins: {
+ '@vue/cli-plugin-eslint': {
+ version,
+ config: 'airbnb'
+ },
+ '@vue/cli-plugin-babel': {
+ version,
+ config: 'airbnb'
+ }
+ }
+ })
+
+ const pkg = JSON.parse(await project.read('package.json'))
+ expect(pkg.devDependencies).toHaveProperty('babel-eslint')
+ expect(pkg.devDependencies).not.toHaveProperty('@babel/core')
+ expect(pkg.eslintConfig).toMatchObject({
+ parserOptions: {
+ parser: 'babel-eslint'
+ }
+ })
+ pkg.eslintConfig.parserOptions.testMerge = 'testMerge'
+ await project.write('package.json', JSON.stringify(pkg, null, 2))
+ const eslintConfigBefore = pkg.eslintConfig
+
+ await project.upgrade('eslint')
+
+ const updatedPkg = JSON.parse(await project.read('package.json'))
+ expect(updatedPkg.eslintConfig).toMatchObject({
+ ...eslintConfigBefore,
+ parserOptions: {
+ testMerge: 'testMerge',
+ parser: '@babel/eslint-parser'
+ }
+ })
+ expect(updatedPkg.devDependencies['@babel/eslint-parser']).toMatch('^7')
+ expect(updatedPkg.devDependencies).not.toHaveProperty('babel-eslint')
+ expect(updatedPkg.devDependencies).toHaveProperty('@babel/core')
+})
+
+test('upgrade: not add @babel/eslint-parser without babel', async () => {
+ const project = await create('plugin-eslint-not-replace-babel-eslint', {
+ plugins: {
+ '@vue/cli-plugin-eslint': {
+ version: '3.12.1',
+ config: 'airbnb'
+ }
+ }
+ })
+
+ await project.upgrade('eslint')
+
+ const updatedPkg = await project.read('package.json')
+ expect(updatedPkg).not.toMatch('@babel/eslint-parser')
+ expect(updatedPkg).not.toMatch('@babel/core')
+ expect(JSON.parse(updatedPkg).devDependencies.eslint).toMatch('^7')
+})
+
+test('upgrade: not add @babel/eslint-parser with ts', async () => {
+ const project = await create('plugin-eslint-not-add-babel-eslint-ts', {
+ plugins: {
+ '@vue/cli-plugin-eslint': {
+ version: '3.12.1',
+ config: 'airbnb'
+ },
+ '@vue/cli-plugin-typescript': {
+ version: '3.12.1',
+ config: 'airbnb'
+ }
+ }
+ })
+
+ await project.upgrade('eslint')
+
+ const updatedPkg = await project.read('package.json')
+ expect(updatedPkg).not.toMatch('@babel/eslint-parser')
+ expect(updatedPkg).not.toMatch('@babel/core')
+ expect(updatedPkg).toMatch('@typescript-eslint/parser')
+ expect(JSON.parse(updatedPkg).devDependencies.eslint).toMatch('^7')
+})
+
+test('upgrade: replace babel-eslint with @babel/eslint-parser in eslintrc.js', async () => {
+ const project = await create('plugin-eslint-replace-babel-eslint-eslintrc', {
+ useConfigFiles: true,
+ plugins: {
+ '@vue/cli-plugin-eslint': {
+ version: '3.12.1',
+ config: 'airbnb'
+ },
+ '@vue/cli-plugin-babel': {
+ version: '3.12.1',
+ config: 'airbnb'
+ }
+ }
+ })
+
+ const eslintrc = await project.read('.eslintrc.js')
+ expect(eslintrc).toMatch('babel-eslint')
+ const eslintrcMerge = eslintrc.replace(`parser: 'babel-eslint'`, `testMerge: 'testMerge', parser: 'babel-eslint'`)
+ await project.write('.eslintrc.js', eslintrcMerge)
+
+ await project.upgrade('eslint')
+
+ const updatedEslintrc = await project.read('.eslintrc.js')
+ expect(updatedEslintrc).toMatch('@babel/eslint-parser')
+ expect(updatedEslintrc).toMatch('testMerge')
+
+ const updatedPkg = JSON.parse(await project.read('package.json'))
+ expect(updatedPkg.devDependencies).not.toHaveProperty('babel-eslint')
+ expect(updatedPkg.devDependencies.eslint).toMatch('^7')
+})
+
+test.each([
+ ['7.1.0', true],
+ ['7.2.0', false]
+])('upgrade: local @babel/core exists', async (localBabelCoreVersion, bumpVersion) => {
+ const project = await create('plugin-eslint-core-' + String(bumpVersion), {
+ plugins: {
+ '@vue/cli-plugin-eslint': {
+ version: '3.12.1',
+ config: 'airbnb'
+ },
+ '@vue/cli-plugin-babel': {
+ version: '3.12.1',
+ config: 'airbnb'
+ }
+ }
+ })
+
+ const pkg = JSON.parse(await project.read('package.json'))
+ pkg.devDependencies['@babel/core'] = localBabelCoreVersion
+ await project.write('package.json', JSON.stringify(pkg, null, 2))
+
+ await project.upgrade('eslint')
+
+ const updatedPkg = JSON.parse(await project.read('package.json'))
+ expect(updatedPkg.devDependencies['@babel/core'] !== localBabelCoreVersion).toBe(bumpVersion)
+})
diff --git a/packages/@vue/cli-plugin-eslint/__tests__/eslintPlugin.spec.js b/packages/@vue/cli-plugin-eslint/__tests__/eslintPlugin.spec.js
index 80ea409740..ea43a06ac0 100644
--- a/packages/@vue/cli-plugin-eslint/__tests__/eslintPlugin.spec.js
+++ b/packages/@vue/cli-plugin-eslint/__tests__/eslintPlugin.spec.js
@@ -1,4 +1,4 @@
-jest.setTimeout(35000)
+jest.setTimeout(300000)
const path = require('path')
const { linkBin } = require('@vue/cli/lib/util/linkBin')
@@ -45,7 +45,8 @@ test('should work', async () => {
})
const hook = await read('.git/hooks/pre-commit')
expect(hook).toMatch('#yorkie')
- await write('src/main.js', updatedMain)
+ // add a trivial change to avoid empty changeset after running lint-staged
+ await write('src/main.js', updatedMain.replace('false', 'true'))
// nvm doesn't like PREFIX env
if (process.platform === 'darwin') {
delete process.env.PREFIX
@@ -140,3 +141,131 @@ test('should not throw when src folder is ignored by .eslintignore', async () =>
// should not throw
await run('vue-cli-service lint')
})
+
+test('should save report results to file with --output-file option', async () => {
+ const project = await create('eslint-output-file', {
+ plugins: {
+ '@vue/cli-plugin-babel': {},
+ '@vue/cli-plugin-eslint': {
+ config: 'airbnb',
+ lintOn: 'commit'
+ }
+ }
+ })
+ const { read, write, run } = project
+ // should've applied airbnb autofix
+ const main = await read('src/main.js')
+ expect(main).toMatch(';')
+ // remove semicolons
+ const updatedMain = main.replace(/;/g, '')
+ await write('src/main.js', updatedMain)
+
+ // result file name
+ const resultsFile = 'lint_results.json'
+
+ try {
+ // lint in JSON format to output-file
+ await run(`vue-cli-service lint --format json --output-file ${resultsFile} --no-fix`)
+ } catch (e) {
+ // lint with no fix should fail
+ expect(e.code).toBe(1)
+ expect(e.failed).toBeTruthy()
+ }
+
+ let resultsFileContents = ''
+
+ // results file should exist
+ try {
+ resultsFileContents = await read(resultsFile)
+ } catch (e) {
+ expect(e.code).toBe(0)
+ expect(e.failed).toBeFalsy()
+ }
+
+ // results file should not be empty
+ expect(resultsFileContents.length).toBeGreaterThan(0)
+
+ // results file is valid JSON
+ try {
+ JSON.parse(resultsFileContents)
+ } catch (e) {
+ expect(e.code).toBe(0)
+ expect(e.failed).toBeFalsy()
+ }
+
+ // results file should show "Missing semicolon" errors
+ expect(resultsFileContents).toEqual(expect.stringContaining('Missing semicolon'))
+})
+
+test('should persist cache', async () => {
+ const project = await create('eslint-cache', {
+ plugins: {
+ '@vue/cli-plugin-eslint': {
+ config: 'airbnb',
+ lintOn: 'save'
+ }
+ }
+ })
+
+ let done
+ const donePromise = new Promise(resolve => {
+ done = resolve
+ })
+ const { has, run } = project
+ const server = run('vue-cli-service serve')
+
+ server.stdout.on('data', data => {
+ data = data.toString()
+ if (data.match(/Compiled successfully/)) {
+ server.stdin.write('close')
+ done()
+ }
+ })
+
+ await donePromise
+
+ expect(has('node_modules/.cache/eslint/cache.json')).toBe(true)
+})
+
+test(`should use formatter 'codeframe'`, async () => {
+ const project = await create('eslint-formatter-codeframe', {
+ plugins: {
+ '@vue/cli-plugin-babel': {},
+ '@vue/cli-plugin-eslint': {
+ config: 'airbnb',
+ lintOn: 'save'
+ }
+ }
+ })
+ const { read, write, run } = project
+ const main = await read('src/main.js')
+ expect(main).toMatch(';')
+
+ let done
+ const donePromise = new Promise(resolve => {
+ done = resolve
+ })
+ // remove semicolons
+ const updatedMain = main.replace(/;/g, '')
+ await write('src/main.js', updatedMain)
+
+ const server = run('vue-cli-service serve')
+
+ let isFirstMsg = true
+ server.stdout.on('data', data => {
+ data = data.toString()
+ if (isFirstMsg) {
+ expect(data).toMatch(/Failed to compile with \d error/)
+ isFirstMsg = false
+ } else if (data.match(/semi/)) {
+ // check the format of output
+ // https://eslint.org/docs/user-guide/formatters/#codeframe
+ expect(data).toMatch(`error: Missing semicolon (semi) at src${path.sep}main.js`)
+
+ server.stdin.write('close')
+ done()
+ }
+ })
+
+ await donePromise
+})
diff --git a/packages/@vue/cli-plugin-eslint/eslintDeps.js b/packages/@vue/cli-plugin-eslint/eslintDeps.js
index ca5ce62387..4faf4d13b6 100644
--- a/packages/@vue/cli-plugin-eslint/eslintDeps.js
+++ b/packages/@vue/cli-plugin-eslint/eslintDeps.js
@@ -1,28 +1,27 @@
const DEPS_MAP = {
base: {
- eslint: '^6.7.2',
- 'eslint-plugin-vue': '^6.2.2'
+ eslint: '^7.15.0',
+ 'eslint-plugin-vue': '^7.2.0'
},
airbnb: {
- '@vue/eslint-config-airbnb': '^5.0.2',
+ '@vue/eslint-config-airbnb': '^5.3.0',
'eslint-plugin-import': '^2.20.2'
},
prettier: {
'@vue/eslint-config-prettier': '^6.0.0',
- 'eslint-plugin-prettier': '^3.1.3',
- prettier: '^1.19.1'
+ 'eslint-plugin-prettier': '^3.2.0',
+ prettier: '^2.2.1'
},
standard: {
- '@vue/eslint-config-standard': '^5.1.2',
+ '@vue/eslint-config-standard': '^6.0.0',
'eslint-plugin-import': '^2.20.2',
'eslint-plugin-node': '^11.1.0',
- 'eslint-plugin-promise': '^4.2.1',
- 'eslint-plugin-standard': '^4.0.0'
+ 'eslint-plugin-promise': '^4.2.1'
},
typescript: {
- '@vue/eslint-config-typescript': '^5.0.2',
- '@typescript-eslint/eslint-plugin': '^2.33.0',
- '@typescript-eslint/parser': '^2.33.0'
+ '@vue/eslint-config-typescript': '^7.0.0',
+ '@typescript-eslint/eslint-plugin': '^4.9.1',
+ '@typescript-eslint/parser': '^4.9.1'
}
}
@@ -32,7 +31,7 @@ exports.getDeps = function (api, preset, rootOptions = {}) {
const deps = Object.assign({}, DEPS_MAP.base, DEPS_MAP[preset])
if (rootOptions.vueVersion === '3') {
- Object.assign(deps, { 'eslint-plugin-vue': '^7.0.0-0' })
+ Object.assign(deps, { 'eslint-plugin-vue': '^7.2.0' })
}
if (api.hasPlugin('typescript')) {
@@ -41,7 +40,8 @@ exports.getDeps = function (api, preset, rootOptions = {}) {
if (api.hasPlugin('babel') && !api.hasPlugin('typescript')) {
Object.assign(deps, {
- 'babel-eslint': '^10.1.0'
+ '@babel/eslint-parser': '^7.12.1',
+ '@babel/core': '^7.12.10'
})
}
diff --git a/packages/@vue/cli-plugin-eslint/eslintOptions.js b/packages/@vue/cli-plugin-eslint/eslintOptions.js
index c6aea69c3b..c469b50f6c 100644
--- a/packages/@vue/cli-plugin-eslint/eslintOptions.js
+++ b/packages/@vue/cli-plugin-eslint/eslintOptions.js
@@ -14,7 +14,7 @@ exports.config = (api, preset, rootOptions = {}) => {
if (api.hasPlugin('babel') && !api.hasPlugin('typescript')) {
config.parserOptions = {
- parser: 'babel-eslint'
+ parser: '@babel/eslint-parser'
}
}
diff --git a/packages/@vue/cli-plugin-eslint/generator/index.js b/packages/@vue/cli-plugin-eslint/generator/index.js
index 049f6b74cf..a3975e6047 100644
--- a/packages/@vue/cli-plugin-eslint/generator/index.js
+++ b/packages/@vue/cli-plugin-eslint/generator/index.js
@@ -38,15 +38,15 @@ module.exports = (api, { config, lintOn = [] }, rootOptions, invoking) => {
if (lintOn.includes('commit')) {
Object.assign(pkg.devDependencies, {
- 'lint-staged': '^9.5.0'
+ 'lint-staged': '^10.5.3'
})
pkg.gitHooks = {
'pre-commit': 'lint-staged'
}
const extensions = require('../eslintOptions').extensions(api)
- .map(ext => ext.replace(/^\./, '')) // remove the leading `.`
+ .map(ext => ext.replace(/^\./, '')) // remove the leading `.`
pkg['lint-staged'] = {
- [`*.{${extensions.join(',')}}`]: ['vue-cli-service lint', 'git add']
+ [`*.{${extensions.join(',')}}`]: 'vue-cli-service lint'
}
}
diff --git a/packages/@vue/cli-plugin-eslint/index.js b/packages/@vue/cli-plugin-eslint/index.js
index aee5893e62..863c404551 100644
--- a/packages/@vue/cli-plugin-eslint/index.js
+++ b/packages/@vue/cli-plugin-eslint/index.js
@@ -1,33 +1,26 @@
const path = require('path')
+const eslintWebpackPlugin = require('eslint-webpack-plugin')
+/** @type {import('@vue/cli-service').ServicePlugin} */
module.exports = (api, options) => {
if (options.lintOnSave) {
const extensions = require('./eslintOptions').extensions(api)
// Use loadModule to allow users to customize their ESLint dependency version.
const { resolveModule, loadModule } = require('@vue/cli-shared-utils')
const cwd = api.getCwd()
+
const eslintPkg =
loadModule('eslint/package.json', cwd, true) ||
loadModule('eslint/package.json', __dirname, true)
- // eslint-loader doesn't bust cache when eslint config changes
- // so we have to manually generate a cache identifier that takes the config
- // into account.
- const { cacheIdentifier } = api.genCacheConfig(
- 'eslint-loader',
+ // ESLint doesn't clear the cache when you upgrade ESLint plugins (ESlint do consider config changes)
+ // so we have to manually generate a cache identifier that takes lock file into account.
+ const { cacheIdentifier, cacheDirectory } = api.genCacheConfig(
+ 'eslint',
{
- 'eslint-loader': require('eslint-loader/package.json').version,
eslint: eslintPkg.version
},
- [
- '.eslintrc.js',
- '.eslintrc.yaml',
- '.eslintrc.yml',
- '.eslintrc.json',
- '.eslintrc',
- '.eslintignore',
- 'package.json'
- ]
+ ['package.json']
)
api.chainWebpack(webpackConfig => {
@@ -35,29 +28,33 @@ module.exports = (api, options) => {
const allWarnings = lintOnSave === true || lintOnSave === 'warning'
const allErrors = lintOnSave === 'error'
- webpackConfig.module
- .rule('eslint')
- .pre()
- .exclude
- .add(/node_modules/)
- .add(path.dirname(require.resolve('@vue/cli-service')))
- .end()
- .test(/\.(vue|(j|t)sx?)$/)
- .use('eslint-loader')
- .loader(require.resolve('eslint-loader'))
- .options({
- extensions,
- cache: true,
- cacheIdentifier,
- emitWarning: allWarnings,
- // only emit errors in production mode.
- emitError: allErrors,
- eslintPath: path.dirname(
- resolveModule('eslint/package.json', cwd) ||
- resolveModule('eslint/package.json', __dirname)
- ),
- formatter: loadModule('eslint/lib/formatters/codeframe', cwd, true)
- })
+ /** @type {import('eslint-webpack-plugin').Options & import('eslint').ESLint.Options} */
+ const eslintWebpackPluginOptions = {
+ // common to both plugin and ESlint
+ extensions,
+ // ESlint options
+ cwd,
+ cache: true,
+ cacheLocation: path.format({
+ dir: cacheDirectory,
+ name: process.env.VUE_CLI_TEST
+ ? 'cache'
+ : cacheIdentifier,
+ ext: '.json'
+ }),
+ // plugin options
+ context: cwd,
+ // https://github.com/webpack-contrib/eslint-webpack-plugin/issues/56
+ threads: false,
+ emitWarning: allWarnings,
+ emitError: allErrors,
+ eslintPath: path.dirname(
+ resolveModule('eslint/package.json', cwd) ||
+ resolveModule('eslint/package.json', __dirname)
+ ),
+ formatter: 'codeframe'
+ }
+ webpackConfig.plugin('eslint').use(eslintWebpackPlugin, [eslintWebpackPluginOptions])
})
}
@@ -73,7 +70,9 @@ module.exports = (api, options) => {
'--max-errors [limit]':
'specify number of errors to make build failed (default: 0)',
'--max-warnings [limit]':
- 'specify number of warnings to make build failed (default: Infinity)'
+ 'specify number of warnings to make build failed (default: Infinity)',
+ '--output-file [file_path]':
+ 'specify file to write report to'
},
details:
'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
diff --git a/packages/@vue/cli-plugin-eslint/lint.js b/packages/@vue/cli-plugin-eslint/lint.js
index 518fb1c68f..9d5eec9ea1 100644
--- a/packages/@vue/cli-plugin-eslint/lint.js
+++ b/packages/@vue/cli-plugin-eslint/lint.js
@@ -15,7 +15,8 @@ const renamedArgs = {
rule: 'rules',
eslintrc: 'useEslintrc',
c: 'configFile',
- config: 'configFile'
+ config: 'configFile',
+ 'output-file': 'outputFile'
}
module.exports = function lint (args = {}, api) {
@@ -83,6 +84,16 @@ module.exports = function lint (args = {}, api) {
const formatter = engine.getFormatter(args.format || 'codeframe')
+ if (config.outputFile) {
+ const outputFilePath = path.resolve(config.outputFile)
+ try {
+ fs.writeFileSync(outputFilePath, formatter(report.results))
+ log(`Lint results saved to ${chalk.blue(outputFilePath)}`)
+ } catch (err) {
+ log(`Error saving lint results to ${chalk.blue(outputFilePath)}: ${chalk.red(err)}`)
+ }
+ }
+
if (config.fix) {
CLIEngine.outputFixes(report)
}
diff --git a/packages/@vue/cli-plugin-eslint/migrator/index.js b/packages/@vue/cli-plugin-eslint/migrator/index.js
index 06f3712a2e..6ecdf8ba72 100644
--- a/packages/@vue/cli-plugin-eslint/migrator/index.js
+++ b/packages/@vue/cli-plugin-eslint/migrator/index.js
@@ -1,6 +1,6 @@
-const inquirer = require('inquirer')
const { semver } = require('@vue/cli-shared-utils')
+/** @param {import('@vue/cli/lib/MigratorAPI')} api MigratorAPI */
module.exports = async (api) => {
const pkg = require(api.resolve('package.json'))
@@ -14,7 +14,7 @@ module.exports = async (api) => {
api.extendPackage({
devDependencies: {
eslint: localESLintRange,
- 'babel-eslint': '^8.2.5',
+ '@babel/eslint-parser': '^7.12.1',
'eslint-plugin-vue': '^4.5.0'
}
})
@@ -25,51 +25,66 @@ module.exports = async (api) => {
// in case the user does not specify a typical caret range;
// it is used as **fallback** because the user may have not previously
// installed eslint yet, such as in the case that they are from v3.0.x
+ // eslint-disable-next-line node/no-extraneous-require
require('eslint/package.json').version
)
- if (localESLintMajor >= 6) {
+ if (localESLintMajor > 6) {
return
}
- const { confirmUpgrade } = await inquirer.prompt([{
- name: 'confirmUpgrade',
- type: 'confirm',
- message:
- `Your current ESLint version is v${localESLintMajor}.\n` +
- `The latest major version which supported by vue-cli is v6.\n` +
- `Do you want to upgrade? (May contain breaking changes)\n`
- }])
-
- if (confirmUpgrade) {
- const { getDeps } = require('../eslintDeps')
-
- const newDeps = getDeps(api)
- if (pkg.devDependencies['@vue/eslint-config-airbnb']) {
- Object.assign(newDeps, getDeps(api, 'airbnb'))
- }
- if (pkg.devDependencies['@vue/eslint-config-standard']) {
- Object.assign(newDeps, getDeps(api, 'standard'))
+ const { getDeps } = require('../eslintDeps')
+
+ const newDeps = getDeps(api)
+ if (pkg.devDependencies['@vue/eslint-config-airbnb']) {
+ Object.assign(newDeps, getDeps(api, 'airbnb'))
+ }
+ if (pkg.devDependencies['@vue/eslint-config-standard']) {
+ Object.assign(newDeps, getDeps(api, 'standard'))
+ }
+ if (pkg.devDependencies['@vue/eslint-config-prettier']) {
+ Object.assign(newDeps, getDeps(api, 'prettier'))
+ }
+
+ const fields = { devDependencies: newDeps }
+
+ if (newDeps['@babel/core'] && newDeps['@babel/eslint-parser']) {
+ Reflect.deleteProperty(api.generator.pkg.devDependencies, 'babel-eslint')
+
+ const minSupportedBabelCoreVersion = '>=7.2.0'
+ const localBabelCoreVersion = pkg.devDependencies['@babel/core']
+
+ if (localBabelCoreVersion &&
+ semver.satisfies(
+ localBabelCoreVersion,
+ minSupportedBabelCoreVersion
+ )) {
+ Reflect.deleteProperty(newDeps, '@babel/core')
}
- if (pkg.devDependencies['@vue/eslint-config-prettier']) {
- Object.assign(newDeps, getDeps(api, 'prettier'))
+
+ fields.eslintConfig = {
+ parserOptions: {
+ parser: '@babel/eslint-parser'
+ }
}
+ }
- api.extendPackage({ devDependencies: newDeps }, { warnIncompatibleVersions: false })
+ api.extendPackage(fields, { warnIncompatibleVersions: false })
- // in case anyone's upgrading from the legacy `typescript-eslint-parser`
- if (api.hasPlugin('typescript')) {
- api.extendPackage({
- eslintConfig: {
- parserOptions: {
- parser: '@typescript-eslint/parser'
- }
+ // in case anyone's upgrading from the legacy `typescript-eslint-parser`
+ if (api.hasPlugin('typescript')) {
+ api.extendPackage({
+ eslintConfig: {
+ parserOptions: {
+ parser: '@typescript-eslint/parser'
}
- })
- }
-
- // TODO:
- // transform `@vue/prettier` to `eslint:recommended` + `@vue/prettier`
- // transform `@vue/typescript` to `@vue/typescript/recommended` and also fix prettier compatibility for it
+ }
+ })
}
+
+ api.exitLog(`ESLint upgraded from v${localESLintMajor}. to v7\n`)
+
+ // TODO:
+ // transform `@vue/prettier` to `eslint:recommended` + `@vue/prettier`
+ // transform `@vue/typescript` to `@vue/typescript/recommended` and also fix prettier compatibility for it
}
diff --git a/packages/@vue/cli-plugin-eslint/package.json b/packages/@vue/cli-plugin-eslint/package.json
index 2b04357631..ec51e75ba2 100644
--- a/packages/@vue/cli-plugin-eslint/package.json
+++ b/packages/@vue/cli-plugin-eslint/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-eslint",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "eslint plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -23,15 +23,15 @@
"access": "public"
},
"dependencies": {
- "@vue/cli-shared-utils": "^4.5.7",
- "eslint-loader": "^2.2.1",
- "globby": "^9.2.0",
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3",
+ "eslint-webpack-plugin": "^2.4.1",
+ "globby": "^11.0.1",
"inquirer": "^7.1.0",
- "webpack": "^4.0.0",
+ "webpack": "^5.10.0",
"yorkie": "^2.0.0"
},
"peerDependencies": {
- "@vue/cli-service": "^3.0.0 || ^4.0.0-0",
- "eslint": ">= 1.6.0"
+ "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
+ "eslint": ">=7.5.0"
}
}
diff --git a/packages/@vue/cli-plugin-pwa/README.md b/packages/@vue/cli-plugin-pwa/README.md
index 4457c4357e..3102dfea75 100644
--- a/packages/@vue/cli-plugin-pwa/README.md
+++ b/packages/@vue/cli-plugin-pwa/README.md
@@ -96,6 +96,7 @@ file, or the `"vue"` field in `package.json`.
```js
{
+ faviconSVG: 'img/icons/favicon.svg',
favicon32: 'img/icons/favicon-32x32.png',
favicon16: 'img/icons/favicon-16x16.png',
appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
diff --git a/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js b/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
index 1f349b9416..56054308cc 100644
--- a/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
+++ b/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
@@ -30,10 +30,10 @@ test('pwa', async () => {
const index = await project.read('dist/index.html')
// should split and preload app.js & vendor.js
- expect(index).toMatch(/]+js\/app[^>]+\.js" rel="preload" as="script">/)
- expect(index).toMatch(/]+js\/chunk-vendors[^>]+\.js" rel="preload" as="script">/)
+ // expect(index).toMatch(/]+js\/app[^>]+\.js" rel="preload" as="script">/)
+ // expect(index).toMatch(/]+js\/chunk-vendors[^>]+\.js" rel="preload" as="script">/)
// should preload css
- expect(index).toMatch(/]+app[^>]+\.css" rel="preload" as="style">/)
+ // expect(index).toMatch(/]+app[^>]+\.css" rel="preload" as="style">/)
// PWA specific directives
expect(index).toMatch(``)
@@ -59,7 +59,7 @@ test('pwa', async () => {
browser = launched.browser
// workbox plugin fetches scripts from CDN so it takes a while...
- await new Promise(r => setTimeout(r, process.env.CI ? 5000 : 2000))
+ await new Promise(resolve => setTimeout(resolve, process.env.CI ? 5000 : 2000))
const logs = launched.logs
expect(logs.some(msg => msg.match(/Content has been cached for offline use/))).toBe(true)
expect(logs.some(msg => msg.match(/App is being served from cache by a service worker/))).toBe(true)
diff --git a/packages/@vue/cli-plugin-pwa/generator/index.js b/packages/@vue/cli-plugin-pwa/generator/index.js
index 7360c6757d..fd3ca254a0 100644
--- a/packages/@vue/cli-plugin-pwa/generator/index.js
+++ b/packages/@vue/cli-plugin-pwa/generator/index.js
@@ -1,7 +1,7 @@
module.exports = api => {
api.extendPackage({
dependencies: {
- 'register-service-worker': '^1.7.1'
+ 'register-service-worker': '^1.7.2'
}
})
api.injectImports(api.entryFile, `import './registerServiceWorker'`)
diff --git a/packages/@vue/cli-plugin-pwa/index.js b/packages/@vue/cli-plugin-pwa/index.js
index f8feae2256..89ac894134 100644
--- a/packages/@vue/cli-plugin-pwa/index.js
+++ b/packages/@vue/cli-plugin-pwa/index.js
@@ -54,9 +54,9 @@ module.exports = (api, options) => {
]
}
- const defaultGenerateSWOptions = workboxPluginMode === 'GenerateSW' ? {
- cacheId: name
- } : {}
+ const defaultGenerateSWOptions = workboxPluginMode === 'GenerateSW'
+ ? { cacheId: name }
+ : {}
const workBoxConfig = Object.assign(defaultOptions, defaultGenerateSWOptions, userOptions.workboxOptions)
diff --git a/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js b/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
index f6683ef47e..8db2759a5d 100644
--- a/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
+++ b/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
@@ -1,3 +1,5 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
const ID = 'vue-cli:pwa-html-plugin'
const defaults = {
@@ -43,6 +45,7 @@ const defaultManifest = {
}
const defaultIconPaths = {
+ faviconSVG: 'img/icons/favicon.svg',
favicon32: 'img/icons/favicon-32x32.png',
favicon16: 'img/icons/favicon-16x16.png',
appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
@@ -59,13 +62,13 @@ module.exports = class HtmlPwaPlugin {
apply (compiler) {
compiler.hooks.compilation.tap(ID, compilation => {
- compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(ID, (data, cb) => {
+ HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(ID, (data, cb) => {
// wrap favicon in the base template with IE only comment
data.html = data.html.replace(/]+>/, '')
cb(null, data)
})
- compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, (data, cb) => {
+ HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, (data, cb) => {
const {
name,
themeColor,
@@ -82,8 +85,15 @@ module.exports = class HtmlPwaPlugin {
const assetsVersionStr = assetsVersion ? `?v=${assetsVersion}` : ''
// Favicons
+ if (iconPaths.faviconSVG != null) {
+ data.headTags.push(makeTag('link', {
+ rel: 'icon',
+ type: 'image/svg+xml',
+ href: getTagHref(publicPath, iconPaths.faviconSVG, assetsVersionStr)
+ }))
+ }
if (iconPaths.favicon32 != null) {
- data.head.push(makeTag('link', {
+ data.headTags.push(makeTag('link', {
rel: 'icon',
type: 'image/png',
sizes: '32x32',
@@ -91,7 +101,7 @@ module.exports = class HtmlPwaPlugin {
}))
}
if (iconPaths.favicon16 != null) {
- data.head.push(makeTag('link', {
+ data.headTags.push(makeTag('link', {
rel: 'icon',
type: 'image/png',
sizes: '16x16',
@@ -100,7 +110,7 @@ module.exports = class HtmlPwaPlugin {
}
// Add to home screen for Android and modern mobile browsers
- data.head.push(
+ data.headTags.push(
makeTag('link', manifestCrossorigin
? {
rel: 'manifest',
@@ -115,7 +125,7 @@ module.exports = class HtmlPwaPlugin {
)
if (themeColor != null) {
- data.head.push(
+ data.headTags.push(
makeTag('meta', {
name: 'theme-color',
content: themeColor
@@ -124,7 +134,7 @@ module.exports = class HtmlPwaPlugin {
}
// Add to home screen for Safari on iOS
- data.head.push(
+ data.headTags.push(
makeTag('meta', {
name: 'apple-mobile-web-app-capable',
content: appleMobileWebAppCapable
@@ -139,13 +149,13 @@ module.exports = class HtmlPwaPlugin {
})
)
if (iconPaths.appleTouchIcon != null) {
- data.head.push(makeTag('link', {
+ data.headTags.push(makeTag('link', {
rel: 'apple-touch-icon',
href: getTagHref(publicPath, iconPaths.appleTouchIcon, assetsVersionStr)
}))
}
if (iconPaths.maskIcon != null) {
- data.head.push(makeTag('link', {
+ data.headTags.push(makeTag('link', {
rel: 'mask-icon',
href: getTagHref(publicPath, iconPaths.maskIcon, assetsVersionStr),
color: themeColor
@@ -154,13 +164,13 @@ module.exports = class HtmlPwaPlugin {
// Add to home screen for Windows
if (iconPaths.msTileImage != null) {
- data.head.push(makeTag('meta', {
+ data.headTags.push(makeTag('meta', {
name: 'msapplication-TileImage',
content: getTagHref(publicPath, iconPaths.msTileImage, assetsVersionStr)
}))
}
if (msTileColor != null) {
- data.head.push(
+ data.headTags.push(
makeTag('meta', {
name: 'msapplication-TileColor',
content: msTileColor
diff --git a/packages/@vue/cli-plugin-pwa/lib/noopServiceWorker.js b/packages/@vue/cli-plugin-pwa/lib/noopServiceWorker.js
index b0e6523a93..aa7449e1ad 100644
--- a/packages/@vue/cli-plugin-pwa/lib/noopServiceWorker.js
+++ b/packages/@vue/cli-plugin-pwa/lib/noopServiceWorker.js
@@ -12,6 +12,8 @@
self.addEventListener('install', () => self.skipWaiting())
+self.addEventListener('fetch', () => {})
+
self.addEventListener('activate', () => {
self.clients.matchAll({ type: 'window' }).then(windowClients => {
for (const windowClient of windowClients) {
diff --git a/packages/@vue/cli-plugin-pwa/package.json b/packages/@vue/cli-plugin-pwa/package.json
index 2674e4c6d3..d79b5b1e09 100644
--- a/packages/@vue/cli-plugin-pwa/package.json
+++ b/packages/@vue/cli-plugin-pwa/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-pwa",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "pwa plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -23,14 +23,15 @@
"access": "public"
},
"dependencies": {
- "@vue/cli-shared-utils": "^4.5.7",
- "webpack": "^4.0.0",
- "workbox-webpack-plugin": "^4.3.1"
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3",
+ "html-webpack-plugin": "^4.5.0",
+ "webpack": "^5.10.0",
+ "workbox-webpack-plugin": "^6.0.2"
},
"devDependencies": {
- "register-service-worker": "^1.7.1"
+ "register-service-worker": "^1.7.2"
},
"peerDependencies": {
- "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
+ "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
}
}
diff --git a/packages/@vue/cli-plugin-pwa/ui.js b/packages/@vue/cli-plugin-pwa/ui.js
index f3c7a9a056..b4d9730eb0 100644
--- a/packages/@vue/cli-plugin-pwa/ui.js
+++ b/packages/@vue/cli-plugin-pwa/ui.js
@@ -129,7 +129,7 @@ module.exports = api => {
// Update app manifest (only when there's a manifest.json file,
// otherwise it will be inferred from options in vue.config.js)
if (data.manifest) {
- const name = result['name']
+ const name = result.name
if (name) {
onWriteApi.setData('manifest', {
name,
@@ -137,7 +137,7 @@ module.exports = api => {
})
}
- const themeColor = result['themeColor']
+ const themeColor = result.themeColor
if (themeColor) {
onWriteApi.setData('manifest', {
theme_color: themeColor
diff --git a/packages/@vue/cli-plugin-router/generator/index.js b/packages/@vue/cli-plugin-router/generator/index.js
index 7f7bfb7ae7..eea704111f 100644
--- a/packages/@vue/cli-plugin-router/generator/index.js
+++ b/packages/@vue/cli-plugin-router/generator/index.js
@@ -7,7 +7,7 @@ module.exports = (api, options = {}, rootOptions = {}) => {
api.transformScript(api.entryFile, require('./injectUseRouter'))
api.extendPackage({
dependencies: {
- 'vue-router': '^4.0.0-0'
+ 'vue-router': '^4.0.1'
}
})
} else {
@@ -15,7 +15,7 @@ module.exports = (api, options = {}, rootOptions = {}) => {
api.extendPackage({
dependencies: {
- 'vue-router': '^3.2.0'
+ 'vue-router': '^3.4.3'
}
})
}
diff --git a/packages/@vue/cli-plugin-router/package.json b/packages/@vue/cli-plugin-router/package.json
index d71c7f4b3e..c4fb622753 100644
--- a/packages/@vue/cli-plugin-router/package.json
+++ b/packages/@vue/cli-plugin-router/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/cli-plugin-router",
- "version": "4.5.7",
+ "version": "5.0.0-alpha.3",
"description": "router plugin for vue-cli",
"main": "index.js",
"repository": {
@@ -23,12 +23,12 @@
"access": "public"
},
"dependencies": {
- "@vue/cli-shared-utils": "^4.5.7"
+ "@vue/cli-shared-utils": "^5.0.0-alpha.3"
},
"devDependencies": {
- "@vue/cli-test-utils": "^4.5.7"
+ "@vue/cli-test-utils": "^5.0.0-alpha.3"
},
"peerDependencies": {
- "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
+ "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
}
}
diff --git a/packages/@vue/cli-plugin-typescript/README.md b/packages/@vue/cli-plugin-typescript/README.md
index c466d2f537..393c704051 100644
--- a/packages/@vue/cli-plugin-typescript/README.md
+++ b/packages/@vue/cli-plugin-typescript/README.md
@@ -12,10 +12,6 @@ Since `3.0.0-rc.6`, `typescript` is now a peer dependency of this package, so yo
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`.
diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsConvertLintFlags.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsConvertLintFlags.spec.js
deleted file mode 100644
index 322f525437..0000000000
--- a/packages/@vue/cli-plugin-typescript/__tests__/tsConvertLintFlags.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const fn = require('../lib/convertLintFlags')
-
-test('convert ESLint flags to TSLint flags', () => {
- expect(fn(`
-/* eslint-disable */
-/* eslint-disable no-console, foo-bar, haha */
-// eslint-disable-next-line
-// eslint-disable-next-line no-console, foo-bar, haha
-foo() // eslint-disable-line
-foo() // eslint-disable-line no-console, foo-bar, haha
- `)).toMatch(`
-/* tslint:disable */
-/* tslint:disable:no-console, foo-bar, haha */
-// tslint:disable-next-line
-// tslint:disable-next-line:no-console, foo-bar, haha
-foo() // tslint:disable-line
-foo() // tslint:disable-line:no-console, foo-bar, haha
- `)
-})
diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
index 83cfc0a11e..a745786439 100644
--- a/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
+++ b/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
@@ -18,7 +18,7 @@ test('generate files', async () => {
expect(files['src/main.js']).toBeFalsy()
expect(files['src/App.vue']).toMatch('
-
-
diff --git a/packages/@vue/cli-service-global/__tests__/globalService.spec.js b/packages/@vue/cli-service-global/__tests__/globalService.spec.js
deleted file mode 100644
index c1a7b6dd46..0000000000
--- a/packages/@vue/cli-service-global/__tests__/globalService.spec.js
+++ /dev/null
@@ -1,125 +0,0 @@
-jest.setTimeout(80000)
-
-const fs = require('fs-extra')
-const path = require('path')
-const portfinder = require('portfinder')
-const createServer = require('@vue/cli-test-utils/createServer')
-const execa = require('execa')
-const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
-const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
-
-const cwd = path.resolve(__dirname, 'temp')
-const binPath = require.resolve('@vue/cli/bin/vue')
-const write = (file, content) => fs.writeFile(path.join(cwd, file), content)
-
-const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
-
-const entryJs = `
-import Vue from 'vue'
-import App from './Other.vue'
-
-new Vue({ render: h => h(App) }).$mount('#app')
-`.trim()
-
-beforeEach(async () => {
- await fs.ensureDir(cwd)
- await write('App.vue', entryVue)
- await write('Other.vue', entryVue)
- await write('foo.js', entryJs)
-})
-
-test('global serve', async () => {
- await serve(
- () => execa(binPath, ['serve'], { cwd }),
- async ({ page, nextUpdate, helpers }) => {
- expect(await helpers.getText('h1')).toMatch('hi')
- write('App.vue', entryVue.replace(`{{ msg }}`, 'Updated'))
- await nextUpdate() // wait for child stdout update signal
- try {
- await page.waitForFunction(selector => {
- const el = document.querySelector(selector)
- return el && el.textContent.includes('Updated')
- }, { timeout: 60000 }, 'h1')
- } catch (e) {
- if (process.env.APPVEYOR && e.message.match('timeout')) {
- // AppVeyor VM is so slow that there's a large chance this test cases will time out,
- // we have to tolerate such failures.
- console.error(e)
- } else {
- throw e
- }
- }
- }
- )
-})
-
-let server, browser, page
-test('global build', async () => {
- const { stdout } = await execa(binPath, ['build', 'foo.js'], { cwd })
-
- expect(stdout).toMatch('Build complete.')
-
- const distDir = path.join(cwd, 'dist')
- const hasFile = file => fs.existsSync(path.join(distDir, file))
- expect(hasFile('index.html')).toBe(true)
- expect(hasFile('js')).toBe(true)
- expect(hasFile('css')).toBe(true)
-
- const port = await portfinder.getPortPromise()
- server = createServer({ root: distDir })
-
- await new Promise((resolve, reject) => {
- server.listen(port, err => {
- if (err) return reject(err)
- resolve()
- })
- })
-
- const launched = await launchPuppeteer(`http://localhost:${port}/`)
- browser = launched.browser
- page = launched.page
-
- const h1Text = await page.evaluate(() => {
- return document.querySelector('h1').textContent
- })
-
- expect(h1Text).toMatch('hi')
-})
-
-test('warn if run plain `vue build` or `vue serve` alongside a `package.json` file', async () => {
- await write('package.json', `{
- "name": "hello-world",
- "version": "1.0.0",
- "scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build"
- }
- }`)
-
- // Warn if a package.json with corresponding `script` field exists
- const { stdout } = await execa(binPath, ['build'], { cwd })
- expect(stdout).toMatch(/Did you mean .*(yarn|npm run) build/)
-
- await fs.unlink(path.join(cwd, 'App.vue'))
-
- // Fail if no entry file exists, also show a hint for npm scripts
- expect(() => {
- execa.sync(binPath, ['build'], { cwd })
- }).toThrow(/Did you mean .*(yarn|npm run) build/)
-
- expect(() => {
- execa.sync(binPath, ['serve'], { cwd })
- }).toThrow(/Did you mean .*(yarn|npm run) serve/)
-
- // clean up, otherwise this file will affect other tests
- await fs.unlink(path.join(cwd, 'package.json'))
-})
-
-afterAll(async () => {
- if (browser) {
- await browser.close()
- }
- if (server) {
- server.close()
- }
-})
diff --git a/packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js b/packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js
deleted file mode 100644
index cfcc876652..0000000000
--- a/packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-jest.setTimeout(20000)
-
-const fs = require('fs-extra')
-const path = require('path')
-const portfinder = require('portfinder')
-const createServer = require('@vue/cli-test-utils/createServer')
-const execa = require('execa')
-const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
-
-const cwd = path.resolve(__dirname, 'temp')
-const binPath = require.resolve('@vue/cli/bin/vue')
-const write = (file, content) => fs.writeFile(path.join(cwd, file), content)
-
-const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
-
-beforeAll(async () => {
- await fs.ensureDir(cwd)
- await write('testLib.vue', entryVue)
-})
-
-let server, browser, page
-test('global build --target lib', async () => {
- const { stdout } = await execa(binPath, ['build', 'testLib.vue', '--target', 'lib'], { cwd })
-
- expect(stdout).toMatch('Build complete.')
-
- const distDir = path.join(cwd, 'dist')
- const hasFile = file => fs.existsSync(path.join(distDir, file))
- expect(hasFile('demo.html')).toBe(true)
- expect(hasFile('testLib.common.js')).toBe(true)
- expect(hasFile('testLib.umd.js')).toBe(true)
- expect(hasFile('testLib.umd.min.js')).toBe(true)
- expect(hasFile('testLib.css')).toBe(true)
-
- const port = await portfinder.getPortPromise()
- server = createServer({ root: distDir })
-
- await new Promise((resolve, reject) => {
- server.listen(port, err => {
- if (err) return reject(err)
- resolve()
- })
- })
-
- const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
- browser = launched.browser
- page = launched.page
-
- const h1Text = await page.evaluate(() => {
- return document.querySelector('h1').textContent
- })
-
- expect(h1Text).toMatch('hi')
-})
-
-afterAll(async () => {
- if (browser) {
- await browser.close()
- }
- if (server) {
- server.close()
- }
-})
diff --git a/packages/@vue/cli-service-global/__tests__/globalServiceBuildWc.spec.js b/packages/@vue/cli-service-global/__tests__/globalServiceBuildWc.spec.js
deleted file mode 100644
index db9f79d579..0000000000
--- a/packages/@vue/cli-service-global/__tests__/globalServiceBuildWc.spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-jest.setTimeout(20000)
-
-const fs = require('fs-extra')
-const path = require('path')
-const portfinder = require('portfinder')
-const createServer = require('@vue/cli-test-utils/createServer')
-const execa = require('execa')
-const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
-
-const cwd = path.resolve(__dirname, 'temp')
-const binPath = require.resolve('@vue/cli/bin/vue')
-const write = (file, content) => fs.writeFile(path.join(cwd, file), content)
-
-const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
-
-beforeAll(async () => {
- await fs.ensureDir(cwd)
- await write('my-wc.vue', entryVue)
-})
-
-let server, browser, page
-test('global build --target wc', async () => {
- const { stdout } = await execa(binPath, ['build', 'my-wc.vue', '--target', 'wc'], { cwd })
-
- expect(stdout).toMatch('Build complete.')
-
- const distDir = path.join(cwd, 'dist')
- const hasFile = file => fs.existsSync(path.join(distDir, file))
- expect(hasFile('demo.html')).toBe(true)
- expect(hasFile('my-wc.js')).toBe(true)
- expect(hasFile('my-wc.min.js')).toBe(true)
-
- const port = await portfinder.getPortPromise()
- server = createServer({ root: distDir })
-
- await new Promise((resolve, reject) => {
- server.listen(port, err => {
- if (err) return reject(err)
- resolve()
- })
- })
-
- const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
- browser = launched.browser
- page = launched.page
-
- const h1Text = await page.evaluate(() => {
- return document.querySelector('my-wc').shadowRoot.querySelector('h1').textContent
- })
-
- expect(h1Text).toMatch('hi')
-})
-
-afterAll(async () => {
- if (browser) {
- await browser.close()
- }
- if (server) {
- server.close()
- }
-})
diff --git a/packages/@vue/cli-service-global/index.js b/packages/@vue/cli-service-global/index.js
deleted file mode 100644
index b8c148ee79..0000000000
--- a/packages/@vue/cli-service-global/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const chalk = require('chalk')
-const Service = require('@vue/cli-service')
-const { toPlugin, findExisting } = require('./lib/util')
-
-const babelPlugin = toPlugin('@vue/cli-plugin-babel')
-const eslintPlugin = toPlugin('@vue/cli-plugin-eslint')
-const globalConfigPlugin = require('./lib/globalConfigPlugin')
-
-const context = process.cwd()
-
-function warnAboutNpmScript (cmd) {
- const packageJsonPath = path.join(context, 'package.json')
-
- if (!fs.existsSync(packageJsonPath)) {
- return
- }
-
- let pkg
- try {
- pkg = require(packageJsonPath)
- } catch (e) {
- return
- }
-
- if (!pkg.scripts || !pkg.scripts[cmd]) {
- return
- }
-
- let script = `npm run ${cmd}`
- if (fs.existsSync(path.join(context, 'yarn.lock'))) {
- script = `yarn ${cmd}`
- }
-
- console.log(`There's a ${chalk.yellow('package.json')} in the current directory.`)
- console.log(`Did you mean ${chalk.yellow(script)}?`)
-}
-
-function resolveEntry (entry, cmd) {
- entry = entry || findExisting(context, [
- 'main.js',
- 'index.js',
- 'App.vue',
- 'app.vue'
- ])
-
- if (!entry) {
- console.log(chalk.red(`Failed to locate entry file in ${chalk.yellow(context)}.`))
- console.log(chalk.red(`Valid entry file should be one of: main.js, index.js, App.vue or app.vue.`))
-
- console.log()
- warnAboutNpmScript(cmd)
- process.exit(1)
- }
-
- if (!fs.existsSync(path.join(context, entry))) {
- console.log(chalk.red(`Entry file ${chalk.yellow(entry)} does not exist.`))
-
- console.log()
- warnAboutNpmScript(cmd)
- process.exit(1)
- }
-
- warnAboutNpmScript(cmd)
- return entry
-}
-
-function createService (entry, asLib) {
- return new Service(context, {
- projectOptions: {
- compiler: true,
- lintOnSave: 'default'
- },
- plugins: [
- babelPlugin,
- eslintPlugin,
- globalConfigPlugin(context, entry, asLib)
- ]
- })
-}
-
-exports.serve = (_entry, args) => {
- const entry = resolveEntry(_entry, 'serve')
- createService(entry).run('serve', args)
-}
-
-exports.build = (_entry, args) => {
- const entry = resolveEntry(_entry, 'build')
- const asLib = args.target && args.target !== 'app'
- if (asLib) {
- args.entry = entry
- }
- return createService(entry, asLib).run('build', args)
-}
diff --git a/packages/@vue/cli-service-global/lib/globalConfigPlugin.js b/packages/@vue/cli-service-global/lib/globalConfigPlugin.js
deleted file mode 100644
index 1b3c56dbb5..0000000000
--- a/packages/@vue/cli-service-global/lib/globalConfigPlugin.js
+++ /dev/null
@@ -1,144 +0,0 @@
-const path = require('path')
-const resolve = require('resolve')
-const { findExisting } = require('./util')
-
-module.exports = function createConfigPlugin (context, entry, asLib) {
- return {
- id: '@vue/cli-service-global-config',
- apply: (api, options) => {
- api.chainWebpack(config => {
- // entry is *.vue file, create alias for built-in js entry
- if (/\.vue$/.test(entry)) {
- config.resolve
- .alias
- .set('~entry', path.resolve(context, entry))
- entry = require.resolve('../template/main.js')
- } else {
- // make sure entry is relative
- if (!/^\.\//.test(entry)) {
- entry = `./${entry}`
- }
- }
-
- // ensure core-js polyfills can be imported
- config.resolve
- .alias
- .set('core-js', path.dirname(require.resolve('core-js')))
- .set('regenerator-runtime', path.dirname(require.resolve('regenerator-runtime')))
-
- // ensure loaders can be resolved properly
- // this is done by locating vue's install location (which is a
- // dependency of the global service)
- const modulePath = path.resolve(require.resolve('vue'), '../../../')
- config.resolveLoader
- .modules
- .add(modulePath)
-
- // add resolve alias for vue and vue-hot-reload-api
- // but prioritize versions installed locally.
- try {
- resolve.sync('vue', { basedir: context })
- } catch (e) {
- const vuePath = path.dirname(require.resolve('vue'))
- config.resolve.alias
- .set('vue$', `${vuePath}/${options.compiler ? `vue.esm.js` : `vue.runtime.esm.js`}`)
- }
-
- try {
- resolve.sync('vue-hot-reload-api', { basedir: context })
- } catch (e) {
- config.resolve.alias
- // eslint-disable-next-line node/no-extraneous-require
- .set('vue-hot-reload-api', require.resolve('vue-hot-reload-api'))
- }
-
- // set entry
- config
- .entry('app')
- .clear()
- .add(entry)
-
- const babelOptions = {
- presets: [require.resolve('@vue/cli-plugin-babel/preset')]
- }
-
- // set inline babel options
- config.module
- .rule('js')
- .include
- .clear()
- .end()
- .exclude
- .add(/node_modules/)
- .add(/@vue\/cli-service/)
- .end()
- .uses
- .delete('cache-loader')
- .end()
- .use('babel-loader')
- .tap(() => babelOptions)
-
- // check eslint config presence
- // otherwise eslint-loader goes all the way up to look for eslintrc, can be
- // messed up when the project is inside another project.
- const ESLintConfigFile = findExisting(context, [
- '.eslintrc.js',
- '.eslintrc.yaml',
- '.eslintrc.yml',
- '.eslintrc.json',
- '.eslintrc',
- 'package.json'
- ])
- const hasESLintConfig = ESLintConfigFile === 'package.json'
- ? !!(require(path.join(context, 'package.json')).eslintConfig)
- : !!ESLintConfigFile
-
- // set inline eslint options
- config.module
- .rule('eslint')
- .include
- .clear()
- .end()
- .exclude
- .add(/node_modules/)
- .end()
- .use('eslint-loader')
- .tap(loaderOptions => Object.assign({}, loaderOptions, {
- useEslintrc: hasESLintConfig,
- baseConfig: {
- extends: [
- 'plugin:vue/essential',
- 'eslint:recommended'
- ],
- parserOptions: {
- parser: 'babel-eslint'
- },
- rules: {
- 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
- 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
- }
- }
- }))
-
- if (!asLib) {
- // set html plugin template
- const indexFile = findExisting(context, [
- 'index.html',
- 'public/index.html'
- ]) || path.resolve(__dirname, '../template/index.html')
- config
- .plugin('html')
- .tap(args => {
- args[0].template = indexFile
- return args
- })
- }
-
- // disable copy plugin if no public dir
- if (asLib || !findExisting(context, ['public'])) {
- config.plugins.delete('copy')
- }
- })
- }
- }
-}
diff --git a/packages/@vue/cli-service-global/lib/util.js b/packages/@vue/cli-service-global/lib/util.js
deleted file mode 100644
index a19dd84343..0000000000
--- a/packages/@vue/cli-service-global/lib/util.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-exports.toPlugin = id => ({ id, apply: require(id) })
-
-// Based on https://stackoverflow.com/questions/27367261/check-if-file-exists-case-sensitive
-// Case checking is required, to avoid errors raised by case-sensitive-paths-webpack-plugin
-function fileExistsWithCaseSync (filepath) {
- const { base, dir, root } = path.parse(filepath)
-
- if (dir === root || dir === '.') {
- return true
- }
-
- try {
- const filenames = fs.readdirSync(dir)
- if (!filenames.includes(base)) {
- return false
- }
- } catch (e) {
- // dir does not exist
- return false
- }
-
- return fileExistsWithCaseSync(dir)
-}
-
-exports.findExisting = (context, files) => {
- for (const file of files) {
- if (fileExistsWithCaseSync(path.join(context, file))) {
- return file
- }
- }
-}
diff --git a/packages/@vue/cli-service-global/package.json b/packages/@vue/cli-service-global/package.json
deleted file mode 100644
index 415d3f2fe4..0000000000
--- a/packages/@vue/cli-service-global/package.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "name": "@vue/cli-service-global",
- "version": "4.5.7",
- "description": "vue-cli-service global addon for vue-cli",
- "main": "index.js",
- "publishConfig": {
- "access": "public"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/vuejs/vue-cli.git",
- "directory": "packages/@vue/cli-service-global"
- },
- "keywords": [
- "vue",
- "cli"
- ],
- "author": "Evan You",
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/vuejs/vue-cli/issues"
- },
- "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-service-global#readme",
- "dependencies": {
- "@vue/cli-plugin-babel": "^4.5.7",
- "@vue/cli-plugin-eslint": "^4.5.7",
- "@vue/cli-service": "^4.5.7",
- "babel-eslint": "^10.1.0",
- "chalk": "^3.0.0",
- "core-js": "^3.6.5",
- "eslint": "^5.16.0",
- "eslint-plugin-vue": "^5.2.2",
- "regenerator-runtime": "^0.13.5",
- "resolve": "^1.17.0",
- "vue": "^2.6.11",
- "vue-template-compiler": "^2.6.11"
- }
-}
diff --git a/packages/@vue/cli-service-global/template/index.html b/packages/@vue/cli-service-global/template/index.html
deleted file mode 100644
index be3c262d87..0000000000
--- a/packages/@vue/cli-service-global/template/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
- Vue CLI App
-
-
-
-
-
diff --git a/packages/@vue/cli-service-global/template/main.js b/packages/@vue/cli-service-global/template/main.js
deleted file mode 100644
index 0076570eb0..0000000000
--- a/packages/@vue/cli-service-global/template/main.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-import App from '~entry'
-
-Vue.config.productionTip = false
-
-new Vue({ render: h => h(App) }).$mount('#app')
diff --git a/packages/@vue/cli-service/__tests__/Service.spec.js b/packages/@vue/cli-service/__tests__/Service.spec.js
index 12b1fb54f1..1d34328e5a 100644
--- a/packages/@vue/cli-service/__tests__/Service.spec.js
+++ b/packages/@vue/cli-service/__tests__/Service.spec.js
@@ -3,6 +3,7 @@ jest.mock('vue-cli-plugin-foo', () => () => {}, { virtual: true })
const fs = require('fs')
const path = require('path')
+const { semver } = require('@vue/cli-shared-utils')
const Service = require('../lib/Service')
const mockPkg = json => {
@@ -67,7 +68,7 @@ test('loading plugins from package.json', () => {
mockPkg({
devDependencies: {
bar: '^1.0.0',
- '@vue/cli-plugin-babel': '^4.5.0',
+ '@vue/cli-plugin-babel': '^5.0.0-alpha.3',
'vue-cli-plugin-foo': '^1.0.0'
}
})
@@ -130,7 +131,7 @@ test('keep publicPath when empty', () => {
})
test('load project options from vue.config.js', () => {
- fs.writeFileSync(path.resolve('/', 'vue.config.js'), '') // only to ensure fs.existsSync returns true
+ fs.writeFileSync(path.resolve('/', 'vue.config.js'), '') // only to ensure fs.existsSync returns true
jest.mock(path.resolve('/', 'vue.config.js'), () => ({ lintOnSave: false }), { virtual: true })
mockPkg({
vue: {
@@ -159,8 +160,9 @@ test('api: assertVersion', () => {
const plugin = {
id: 'test-assertVersion',
apply: api => {
- expect(() => api.assertVersion(4)).not.toThrow()
- expect(() => api.assertVersion('^4.0.0-0')).not.toThrow()
+ const majorVersionNumber = semver.major(api.version)
+ expect(() => api.assertVersion(majorVersionNumber)).not.toThrow()
+ expect(() => api.assertVersion(`^${majorVersionNumber}.0.0-0`)).not.toThrow()
// expect(() => api.assertVersion('>= 4')).not.toThrow()
expect(() => api.assertVersion(4.1)).toThrow('Expected string or integer value')
diff --git a/packages/@vue/cli-service/__tests__/build.spec.js b/packages/@vue/cli-service/__tests__/build.spec.js
index 85948f1217..92bbe79d91 100644
--- a/packages/@vue/cli-service/__tests__/build.spec.js
+++ b/packages/@vue/cli-service/__tests__/build.spec.js
@@ -27,11 +27,15 @@ test('build', async () => {
expect(project.has('dist/subfolder/index.html')).toBe(true)
const index = await project.read('dist/index.html')
+
+ // should have set the title inferred from the project name
+ expect(index).toMatch(/e2e-build<\/title>/)
+
// should split and preload app.js & vendor.js
- expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js" rel="preload" as="script">/)
- expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js" rel="preload" as="script">/)
+ // expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js" rel="preload" as="script">/)
+ // expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js" rel="preload" as="script">/)
// should preload css
- expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
+ // expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
// should inject scripts
expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js">/)
@@ -63,6 +67,30 @@ test('build', async () => {
expect(h1Text).toMatch('Welcome to Your Vue.js App')
})
+test('build with --report-json', async () => {
+ const project = await create('e2e-build-report-json', defaultPreset)
+
+ const { stdout } = await project.run('vue-cli-service build --report-json')
+ expect(stdout).toMatch('Build complete.')
+ // should generate report.json
+ expect(project.has('dist/report.json')).toBe(true)
+
+ const report = JSON.parse(await project.read('dist/report.json'))
+ // should contain entry points info
+ expect(report.entrypoints).toHaveProperty('app.chunks')
+ expect(report.entrypoints).toHaveProperty('app.assets')
+
+ const appChunk = report.chunks.find(chunk => chunk.names.includes('app'))
+ // Each chunk should contain meta info
+ expect(appChunk).toHaveProperty('rendered')
+ expect(appChunk).toHaveProperty('initial')
+ expect(appChunk).toHaveProperty('entry')
+ expect(appChunk).toHaveProperty('size')
+ expect(appChunk).toHaveProperty('names')
+ expect(appChunk).toHaveProperty('files')
+ expect(appChunk).toHaveProperty('modules')
+})
+
afterAll(async () => {
if (browser) {
await browser.close()
diff --git a/packages/@vue/cli-service/__tests__/buildWcAsync.spec.js b/packages/@vue/cli-service/__tests__/buildWcAsync.spec.js
index 10b659d386..b8235a7573 100644
--- a/packages/@vue/cli-service/__tests__/buildWcAsync.spec.js
+++ b/packages/@vue/cli-service/__tests__/buildWcAsync.spec.js
@@ -1,5 +1,6 @@
jest.setTimeout(30000)
+const fs = require('fs-extra')
const path = require('path')
const portfinder = require('portfinder')
const createServer = require('@vue/cli-test-utils/createServer')
@@ -19,10 +20,11 @@ test('build as wc in async mode', async () => {
expect(project.has('dist/build-wc-async.min.js')).toBe(true)
// code-split chunks
- expect(project.has('dist/build-wc-async.1.js')).toBe(true)
- expect(project.has('dist/build-wc-async.1.min.js')).toBe(true)
- expect(project.has('dist/build-wc-async.2.js')).toBe(true)
- expect(project.has('dist/build-wc-async.2.min.js')).toBe(true)
+ const files = await fs.readdir(path.resolve(project.dir, 'dist'))
+ const asyncOutputs = files.filter(f => f.match(/build-wc-async\.\d+\.js/))
+ const minifiedAsycnOutputs = files.filter(f => f.match(/build-wc-async\.\d+\.min\.js/))
+ expect(asyncOutputs.length).toBe(2)
+ expect(minifiedAsycnOutputs.length).toBe(2)
const port = await portfinder.getPortPromise()
server = createServer({ root: path.join(project.dir, 'dist') })
diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js
index bd635ab9cd..a631faeee0 100644
--- a/packages/@vue/cli-service/__tests__/css.spec.js
+++ b/packages/@vue/cli-service/__tests__/css.spec.js
@@ -62,7 +62,7 @@ test('default loaders', () => {
LANGS.forEach(lang => {
const loader = lang === 'css' ? [] : LOADERS[lang]
expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader))
- expect(findOptions(config, lang, 'postcss').plugins).toEqual([require('autoprefixer')])
+ expect(findOptions(config, lang, 'postcss').postcssOptions.plugins).toEqual([require('autoprefixer')])
// assert css-loader options
expect(findOptions(config, lang, 'css')).toEqual({
sourceMap: false,
@@ -83,7 +83,7 @@ test('production defaults', () => {
LANGS.forEach(lang => {
const loader = lang === 'css' ? [] : LOADERS[lang]
expect(findLoaders(config, lang)).toEqual([extractLoaderPath, 'css', 'postcss'].concat(loader))
- expect(findOptions(config, lang, 'postcss').plugins).toEqual([require('autoprefixer')])
+ expect(findOptions(config, lang, 'postcss').postcssOptions.plugins).toEqual([require('autoprefixer')])
expect(findOptions(config, lang, 'css')).toEqual({
sourceMap: false,
importLoaders: 2
@@ -92,11 +92,11 @@ test('production defaults', () => {
})
test('override postcss config', () => {
- const config = genConfig({ postcss: {}})
+ const config = genConfig({ postcss: {} })
LANGS.forEach(lang => {
const loader = lang === 'css' ? [] : LOADERS[lang]
expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader))
- expect(findOptions(config, lang, 'postcss').plugins).toBeFalsy()
+ expect(findOptions(config, lang, 'postcss').postcssOptions).toBeFalsy()
// assert css-loader options
expect(findOptions(config, lang, 'css')).toEqual({
sourceMap: false,
@@ -254,7 +254,7 @@ test('css.extract', () => {
// an additional instance of postcss-loader is injected for inline minification.
expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader))
expect(findOptions(config, lang, 'css').importLoaders).toBe(3)
- expect(findOptions(config, lang, 'postcss').plugins).toBeTruthy()
+ expect(findOptions(config, lang, 'postcss').postcssOptions.plugins).toBeTruthy()
})
const config2 = genConfig({
@@ -272,7 +272,7 @@ test('css.extract', () => {
expect(findLoaders(config2, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader))
expect(findOptions(config2, lang, 'css').importLoaders).toBe(3)
// minification loader should be injected before the user-facing postcss-loader
- expect(findOptions(config2, lang, 'postcss').plugins).toBeTruthy()
+ expect(findOptions(config2, lang, 'postcss').postcssOptions.plugins).toBeTruthy()
})
})
@@ -387,10 +387,3 @@ test('scss loaderOptions', () => {
// should not merge scss options into default sass config
expect(findOptions(config, 'sass', 'sass')).not.toHaveProperty('webpackImporter')
})
-
-test('should use dart sass implementation whenever possible', () => {
- const config = genConfig()
- expect(findOptions(config, 'scss', 'sass')).toMatchObject({ implementation: require('sass') })
- expect(findOptions(config, 'sass', 'sass')).toMatchObject({ implementation: require('sass') })
-})
-
diff --git a/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js b/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
new file mode 100644
index 0000000000..56c63480e2
--- /dev/null
+++ b/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
@@ -0,0 +1,87 @@
+jest.setTimeout(30000)
+
+const create = require('@vue/cli-test-utils/createTestProject')
+const { defaultPreset } = require('@vue/cli/lib/options')
+
+test('autoprefixer', async () => {
+ const project = await create('css-autoprefixer', defaultPreset)
+
+ await project.write('vue.config.js', 'module.exports = { filenameHashing: false }\n')
+
+ const appVue = await project.read('src/App.vue')
+ await project.write('src/App.vue', appVue.replace('#app {', '#app {\n user-select: none;'))
+
+ await project.run('vue-cli-service build')
+
+ const css = await project.read('dist/css/app.css')
+ expect(css).toMatch('-webkit-user-select')
+})
+
+test('CSS inline minification', async () => {
+ const project = await create('css-inline-minification', defaultPreset)
+
+ await project.write('vue.config.js', 'module.exports = { filenameHashing: false, css: { extract: false } }\n')
+
+ const appVue = await project.read('src/App.vue')
+ await project.write('src/App.vue',
+ appVue.replace(
+ '#app {',
+
+ '#app {\n height: calc(100px * 2);'
+ )
+ )
+ await project.run('vue-cli-service build')
+ const appJs = await project.read('dist/js/app.js')
+ expect(appJs).not.toMatch('calc(100px')
+ expect(appJs).toMatch('height:200px;')
+})
+
+test('CSS minification', async () => {
+ const project = await create('css-minification', defaultPreset)
+
+ await project.write('vue.config.js', 'module.exports = { filenameHashing: false }\n')
+
+ const appVue = await project.read('src/App.vue')
+ await project.write('src/App.vue',
+ appVue.replace(
+ '#app {',
+
+ '#app {\n height: calc(100px * 2);'
+ )
+ )
+ process.env.VUE_CLI_TEST_MINIMIZE = true
+ await project.run('vue-cli-service build')
+ const appCss = await project.read('dist/css/app.css')
+ expect(appCss).not.toMatch('calc(100px')
+ expect(appCss).toMatch('height:200px;')
+})
+
+test('Custom PostCSS plugins', async () => {
+ const project = await create('css-custom-postcss', defaultPreset)
+ await project.write('vue.config.js', `
+ const toRedPlugin = () => {
+ return {
+ postcssPlugin: 'to-red',
+ Declaration (decl) {
+ if (decl.prop === 'color') {
+ decl.value = 'red'
+ }
+ }
+ }
+ }
+ toRedPlugin.postcss = true
+
+ module.exports = {
+ filenameHashing: false,
+ css: {
+ loaderOptions: {
+ postcss: {
+ postcssOptions: { plugins: [toRedPlugin] }
+ }
+ }
+ }
+ }`)
+ await project.run('vue-cli-service build')
+ const appCss = await project.read('dist/css/app.css')
+ expect(appCss).toMatch('color:red')
+})
diff --git a/packages/@vue/cli-service/__tests__/generator.spec.js b/packages/@vue/cli-service/__tests__/generator.spec.js
index 3565cba1c1..2fba9353dc 100644
--- a/packages/@vue/cli-service/__tests__/generator.spec.js
+++ b/packages/@vue/cli-service/__tests__/generator.spec.js
@@ -19,15 +19,6 @@ test('sass (default)', async () => {
expect(pkg).toHaveProperty(['devDependencies', 'sass'])
})
-test('node sass', async () => {
- const { pkg, files } = await generateWithOptions({
- cssPreprocessor: 'node-sass'
- })
-
- expect(files['src/App.vue']).toMatch('<style lang="scss">')
- expect(pkg).toHaveProperty(['devDependencies', 'node-sass'])
-})
-
test('dart sass', async () => {
const { pkg, files } = await generateWithOptions({
cssPreprocessor: 'dart-sass'
@@ -42,7 +33,7 @@ test('Vue 3', async () => {
vueVersion: '3'
})
- expect(pkg.dependencies.vue).toBe('^3.0.0')
+ expect(pkg.dependencies.vue).toMatch('^3')
expect(pkg).toHaveProperty(['devDependencies', '@vue/compiler-sfc'])
expect(files['src/main.js']).toMatch(`import { createApp } from 'vue'`)
diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
index 96fe90edc6..1542e2486a 100644
--- a/packages/@vue/cli-service/__tests__/modernMode.spec.js
+++ b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -32,12 +32,12 @@ test('modern mode', async () => {
const index = await project.read('dist/index.html')
// should use <script type="module" crossorigin="use-credentials"> for modern bundle
- expect(index).toMatch(/<script type="module" src="\/js\/chunk-vendors\.\w{8}\.js">/)
- expect(index).toMatch(/<script type="module" src="\/js\/app\.\w{8}\.js">/)
+ expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js" type="module">/)
+ expect(index).toMatch(/<script src="\/js\/app\.\w{8}\.js" type="module">/)
// should use <link rel="modulepreload" crossorigin="use-credentials"> for modern bundle
- expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script">/)
- expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script">/)
+ // expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script">/)
+ // expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script">/)
// should use <script nomodule> for legacy bundle
expect(index).toMatch(/<script src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
@@ -53,11 +53,11 @@ test('modern mode', async () => {
expect(stdout2).toMatch('Build complete.')
const index2 = await project.read('dist/index.html')
// should use <script type="module" crossorigin="use-credentials"> for modern bundle
- expect(index2).toMatch(/<script type="module" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin="use-credentials">/)
- expect(index2).toMatch(/<script type="module" src="\/js\/app\.\w{8}\.js" crossorigin="use-credentials">/)
+ expect(index2).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin="use-credentials" type="module">/)
+ expect(index2).toMatch(/<script src="\/js\/app\.\w{8}\.js" crossorigin="use-credentials" type="module">/)
// should use <link rel="modulepreload" crossorigin="use-credentials"> for modern bundle
- expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
- expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
+ // expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
+ // expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
// start server and ensure the page loads properly
const port = await portfinder.getPortPromise()
diff --git a/packages/@vue/cli-service/__tests__/multiPage.spec.js b/packages/@vue/cli-service/__tests__/multiPage.spec.js
index eac322ed82..441fe07537 100644
--- a/packages/@vue/cli-service/__tests__/multiPage.spec.js
+++ b/packages/@vue/cli-service/__tests__/multiPage.spec.js
@@ -109,24 +109,24 @@ test('build w/ multi page', async () => {
const assertSharedAssets = file => {
// should split and preload vendor chunk
- expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js" rel="preload" as="script">/)
+ // expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js" rel="preload" as="script">/)
expect(file).toMatch(/<script [^>]*src="\/js\/chunk-vendors\.\w+\.js">/)
}
const index = await project.read('dist/index.html')
assertSharedAssets(index)
// should split and preload common js and css
- expect(index).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
+ // expect(index).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
expect(index).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
expect(index).toMatch(/<link href="\/css\/chunk-common\.\w+\.css" rel="stylesheet">/)
- expect(index).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
+ // expect(index).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
// should preload correct page file
- expect(index).toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
- expect(index).not.toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
- expect(index).not.toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
+ // expect(index).toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
+ // expect(index).not.toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
+ // expect(index).not.toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
// should prefetch async chunk js and css
- expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
- expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
+ // expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
+ // expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
// should load correct page js
expect(index).toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
expect(index).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
@@ -135,13 +135,13 @@ test('build w/ multi page', async () => {
const foo = await project.read('dist/foo.html')
assertSharedAssets(foo)
// should preload correct page file
- expect(foo).not.toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
- expect(foo).toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
- expect(foo).not.toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
+ // expect(foo).not.toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
+ // expect(foo).toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
+ // expect(foo).not.toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
// should not prefetch async chunk js and css because it's not used by
// this entry
- expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
- expect(foo).not.toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
+ // expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
+ // expect(foo).not.toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
// should load correct page js
expect(foo).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
expect(foo).toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
@@ -150,17 +150,17 @@ test('build w/ multi page', async () => {
const bar = await project.read('dist/bar.html')
assertSharedAssets(bar)
// bar & index have a shared common chunk (App.vue)
- expect(bar).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
- expect(bar).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
+ // expect(bar).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
+ // expect(bar).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
expect(bar).toMatch(/<link href="\/css\/chunk-common\.\w+\.css" rel="stylesheet">/)
- expect(bar).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
+ // expect(bar).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
// should preload correct page file
- expect(bar).not.toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
- expect(bar).not.toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
- expect(bar).toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
+ // expect(bar).not.toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
+ // expect(bar).not.toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
+ // expect(bar).toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
// should prefetch async chunk js and css
- expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
- expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
+ // expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
+ // expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
// should load correct page js
expect(bar).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
expect(bar).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
diff --git a/packages/@vue/cli-service/__tests__/proxy.spec.js b/packages/@vue/cli-service/__tests__/proxy.spec.js
index 725fcef8e1..cbaff7f9df 100644
--- a/packages/@vue/cli-service/__tests__/proxy.spec.js
+++ b/packages/@vue/cli-service/__tests__/proxy.spec.js
@@ -1,6 +1,6 @@
jest.setTimeout(30000)
-const request = require('request-promise-native')
+const fetch = require('node-fetch')
const { defaultPreset } = require('@vue/cli/lib/options')
const create = require('@vue/cli-test-utils/createTestProject')
const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
@@ -30,29 +30,22 @@ afterAll(() => {
let newId = 1
async function assertProxy (url, title) {
- const res = await request({
- url: `${url}posts/1`,
- json: true
- })
+ const res = await fetch(`${url}posts/1`).then(result => result.json())
expect(res.title).toBe(title)
// POST
newId++
- await request({
- url: `${url}posts`,
- json: true,
+ await fetch(`${url}posts`, {
method: 'POST',
- body: {
+ body: JSON.stringify({
id: newId,
title: 'new',
author: 'test'
- }
+ }),
+ headers: { 'Content-Type': 'application/json' }
})
- const newPost = await request({
- url: `${url}posts/${newId}`,
- json: true
- })
+ const newPost = await fetch(`${url}posts/${newId}`).then(result => result.json())
expect(newPost.title).toBe('new')
}
diff --git a/packages/@vue/cli-service/__tests__/serve.spec.js b/packages/@vue/cli-service/__tests__/serve.spec.js
index cceeebcbd9..6eaa11926d 100644
--- a/packages/@vue/cli-service/__tests__/serve.spec.js
+++ b/packages/@vue/cli-service/__tests__/serve.spec.js
@@ -192,4 +192,3 @@ test('use a single websocket connection for HMR', async () => {
}
)
})
-
diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js
index d96a829928..c36edede16 100644
--- a/packages/@vue/cli-service/generator/index.js
+++ b/packages/@vue/cli-service/generator/index.js
@@ -6,10 +6,10 @@ module.exports = (api, options) => {
if (options.vueVersion === '3') {
api.extendPackage({
dependencies: {
- 'vue': '^3.0.0'
+ 'vue': '^3.0.4'
},
devDependencies: {
- '@vue/compiler-sfc': '^3.0.0'
+ '@vue/compiler-sfc': '^3.0.4'
}
})
} else {
@@ -38,24 +38,20 @@ module.exports = (api, options) => {
if (options.cssPreprocessor) {
const deps = {
sass: {
- sass: '^1.26.5',
- 'sass-loader': '^8.0.2'
- },
- 'node-sass': {
- 'node-sass': '^4.12.0',
- 'sass-loader': '^8.0.2'
+ sass: '^1.30.0',
+ 'sass-loader': '^10.1.0'
},
'dart-sass': {
- sass: '^1.26.5',
- 'sass-loader': '^8.0.2'
+ sass: '^1.30.0',
+ 'sass-loader': '^10.1.0'
},
less: {
'less': '^3.0.4',
'less-loader': '^5.0.0'
},
stylus: {
- 'stylus': '^0.54.7',
- 'stylus-loader': '^3.0.2'
+ 'stylus': '^0.54.8',
+ 'stylus-loader': '^4.3.1'
}
}
diff --git a/packages/@vue/cli-service/generator/template/public/index.html b/packages/@vue/cli-service/generator/template/public/index.html
index 3d4e96efc2..2a4672c1f7 100644
--- a/packages/@vue/cli-service/generator/template/public/index.html
+++ b/packages/@vue/cli-service/generator/template/public/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/packages/@vue/cli-service/lib/PluginAPI.js b/packages/@vue/cli-service/lib/PluginAPI.js
index fb20fc6393..88db286f40 100644
--- a/packages/@vue/cli-service/lib/PluginAPI.js
+++ b/packages/@vue/cli-service/lib/PluginAPI.js
@@ -84,7 +84,7 @@ class PluginAPI {
fn = opts
opts = null
}
- this.service.commands[name] = { fn, opts: opts || {}}
+ this.service.commands[name] = { fn, opts: opts || {} }
}
/**
@@ -163,7 +163,6 @@ class PluginAPI {
const variables = {
partialIdentifier,
'cli-service': require('../package.json').version,
- 'cache-loader': require('cache-loader/package.json').version,
env: process.env.NODE_ENV,
test: !!process.env.VUE_CLI_TEST,
config: [
@@ -172,6 +171,12 @@ class PluginAPI {
]
}
+ try {
+ variables['cache-loader'] = require('cache-loader/package.json').version
+ } catch (e) {
+ // cache-loader is only intended to be used for webpack 4
+ }
+
if (!Array.isArray(configFiles)) {
configFiles = [configFiles]
}
diff --git a/packages/@vue/cli-service/lib/Service.js b/packages/@vue/cli-service/lib/Service.js
index d3525fca24..a477177a07 100644
--- a/packages/@vue/cli-service/lib/Service.js
+++ b/packages/@vue/cli-service/lib/Service.js
@@ -1,18 +1,21 @@
const fs = require('fs')
const path = require('path')
const debug = require('debug')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
const Config = require('webpack-chain')
const PluginAPI = require('./PluginAPI')
const dotenv = require('dotenv')
const dotenvExpand = require('dotenv-expand')
const defaultsDeep = require('lodash.defaultsdeep')
-const { chalk, warn, error, isPlugin, resolvePluginId, loadModule, resolvePkg } = require('@vue/cli-shared-utils')
+const { chalk, warn, error, isPlugin, resolvePluginId, loadModule, resolvePkg, resolveModule } = require('@vue/cli-shared-utils')
const { defaults, validate } = require('./options')
+const checkWebpack = require('@vue/cli-service/lib/util/checkWebpack')
module.exports = class Service {
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
+ checkWebpack(context)
+
process.VUE_CLI_SERVICE = this
this.initialized = false
this.context = context
@@ -35,7 +38,7 @@ module.exports = class Service {
// resolve the default mode to use for each command
// this is provided by plugins as module.exports.defaultModes
// so we can get the information without actually applying the plugin.
- this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
+ this.modes = this.plugins.reduce((modes, { apply: { defaultModes } }) => {
return Object.assign(modes, defaultModes)
}, {})
}
@@ -140,9 +143,9 @@ module.exports = class Service {
}
resolvePlugins (inlinePlugins, useBuiltIn) {
- const idToPlugin = id => ({
+ const idToPlugin = (id, absolutePath) => ({
id: id.replace(/^.\//, 'built-in:'),
- apply: require(id)
+ apply: require(absolutePath || id)
})
let plugins
@@ -154,10 +157,11 @@ module.exports = class Service {
'./commands/help',
// config plugins are order sensitive
'./config/base',
+ './config/assets',
'./config/css',
'./config/prod',
'./config/app'
- ].map(idToPlugin)
+ ].map((id) => idToPlugin(id))
if (inlinePlugins) {
plugins = useBuiltIn !== false
@@ -172,16 +176,15 @@ module.exports = class Service {
this.pkg.optionalDependencies &&
id in this.pkg.optionalDependencies
) {
- let apply = () => {}
- try {
- apply = require(id)
- } catch (e) {
+ let apply = loadModule(id, this.pkgContext)
+ if (!apply) {
warn(`Optional dependency ${id} is not installed.`)
+ apply = () => {}
}
return { id, apply }
} else {
- return idToPlugin(id)
+ return idToPlugin(id, resolveModule(id, this.pkgContext))
}
})
plugins = builtInPlugins.concat(projectPlugins)
diff --git a/packages/@vue/cli-service/lib/commands/build/.gitignore b/packages/@vue/cli-service/lib/commands/build/.gitignore
deleted file mode 100644
index efbf7101f7..0000000000
--- a/packages/@vue/cli-service/lib/commands/build/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-entry-wc.js
diff --git a/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html
index 74ce7b4844..5ae658ca35 100644
--- a/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html
+++ b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<meta charset="utf-8">
<title><%- htmlWebpackPlugin.options.libName %> demo
diff --git a/packages/@vue/cli-service/lib/commands/build/demo-lib.html b/packages/@vue/cli-service/lib/commands/build/demo-lib.html
index a6a21e967b..e916d2d975 100644
--- a/packages/@vue/cli-service/lib/commands/build/demo-lib.html
+++ b/packages/@vue/cli-service/lib/commands/build/demo-lib.html
@@ -1,3 +1,4 @@
+
<%- htmlWebpackPlugin.options.libName %> demo
diff --git a/packages/@vue/cli-service/lib/commands/build/demo-wc.html b/packages/@vue/cli-service/lib/commands/build/demo-wc.html
index c1e1ce2dbb..83c81c91c1 100644
--- a/packages/@vue/cli-service/lib/commands/build/demo-wc.html
+++ b/packages/@vue/cli-service/lib/commands/build/demo-wc.html
@@ -1,3 +1,4 @@
+
<%- htmlWebpackPlugin.options.libName %> demo
diff --git a/packages/@vue/cli-service/lib/commands/build/entry-wc.js b/packages/@vue/cli-service/lib/commands/build/entry-wc.js
new file mode 100644
index 0000000000..bc7e3d7cf9
--- /dev/null
+++ b/packages/@vue/cli-service/lib/commands/build/entry-wc.js
@@ -0,0 +1,12 @@
+import './setPublicPath'
+import Vue from 'vue'
+import wrap from '@vue/web-component-wrapper'
+
+// runtime shared by every component chunk
+import 'css-loader/dist/runtime/api.js'
+import 'vue-style-loader/lib/addStylesShadow'
+import 'vue-loader/lib/runtime/componentNormalizer'
+
+window.customElements.define('build-wc-async-app', wrap(Vue, () => import('~root/src/App.vue?shadow')))
+
+window.customElements.define('build-wc-async-hello-world', wrap(Vue, () => import('~root/src/components/HelloWorld.vue?shadow')))
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index 15f6b4d16f..d749e7230d 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -33,7 +33,7 @@ module.exports = (api, options) => {
'--formats': `list of output formats for library builds (default: ${defaults.formats})`,
'--name': `name for lib or web-component mode (default: "name" in package.json or entry filename)`,
'--filename': `file name for output, only usable for 'lib' target (default: value of --name)`,
- '--no-clean': `do not remove the dist directory before building the project`,
+ '--no-clean': `do not remove the dist directory contents before building the project`,
'--report': `generate report.html to help analyze bundle content`,
'--report-json': 'generate report.json to help analyze bundle content',
'--skip-plugins': `comma-separated list of plugin names to skip for this run`,
@@ -193,7 +193,7 @@ async function build (args, api, options) {
}
if (args.clean) {
- await fs.remove(targetDir)
+ await fs.emptyDir(targetDir)
}
return new Promise((resolve, reject) => {
@@ -204,7 +204,7 @@ async function build (args, api, options) {
}
if (stats.hasErrors()) {
- return reject(`Build failed with errors.`)
+ return reject(new Error('Build failed with errors.'))
}
if (!args.silent) {
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
index cea6a23f0b..971b2eba8f 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
@@ -129,6 +129,11 @@ module.exports = (api, { entry, name, formats, filename, 'inline-vue': inlineVue
publicPath: ''
})
+ if (format === 'commonjs2') {
+ // #6188
+ delete rawConfig.output.library
+ }
+
return rawConfig
}
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
index 32a2394768..037e88c717 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
@@ -5,15 +5,18 @@ module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
// Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
process.env.VUE_CLI_CSS_SHADOW_MODE = true
- const { log, error, loadModule, semver } = require('@vue/cli-shared-utils')
+ const { log, error, semver } = require('@vue/cli-shared-utils')
const abort = msg => {
log()
error(msg)
process.exit(1)
}
- const vue = loadModule('vue', api.resolve('.'))
- if (vue && semver.satisfies(vue.version, '^3.0.0-0')) {
+ const cwd = api.getCwd()
+ const webpack = require('webpack')
+ const webpackMajor = semver.major(webpack.version)
+ const vueMajor = require('../../util/getVueMajor')(cwd)
+ if (vueMajor === 3) {
abort(`Vue 3 support of the web component target is still under development.`)
}
@@ -58,9 +61,15 @@ module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
config.optimization.minimize(false)
}
+ config
+ .plugin('webpack-virtual-modules')
+ .use(require('webpack-virtual-modules'), [{
+ [dynamicEntry.filePath]: dynamicEntry.content
+ }])
+
config
.plugin('web-component-options')
- .use(require('webpack').DefinePlugin, [{
+ .use(webpack.DefinePlugin, [{
'process.env.CUSTOM_ELEMENT_NAME': JSON.stringify(libName)
}])
@@ -108,13 +117,10 @@ module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
const entryName = `${libName}${minify ? `.min` : ``}`
rawConfig.entry = {
- [entryName]: dynamicEntry
+ [entryName]: dynamicEntry.filePath
}
Object.assign(rawConfig.output, {
- // to ensure that multiple copies of async wc bundles can co-exist
- // on the same page.
- jsonpFunction: libName.replace(/-\w/g, c => c.charAt(1).toUpperCase()) + '_jsonp',
filename: `${entryName}.js`,
chunkFilename: `${libName}.[name]${minify ? `.min` : ``}.js`,
// use dynamic publicPath so this can be deployed anywhere
@@ -123,6 +129,14 @@ module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
publicPath: ''
})
+ // to ensure that multiple copies of async wc bundles can co-exist
+ // on the same page.
+ if (webpackMajor === 4) {
+ rawConfig.output.jsonpFunction = libName.replace(/-\w/g, c => c.charAt(1).toUpperCase()) + '_jsonp'
+ } else {
+ rawConfig.output.uniqueName = `vue-lib-${libName}`
+ }
+
return rawConfig
}
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveWcEntry.js b/packages/@vue/cli-service/lib/commands/build/resolveWcEntry.js
index 4aac941304..21c640488e 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveWcEntry.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveWcEntry.js
@@ -1,4 +1,3 @@
-const fs = require('fs')
const path = require('path')
const camelizeRE = /-(\w)/g
@@ -45,17 +44,24 @@ exports.resolveEntry = (prefix, libName, files, isAsync) => {
? [createElement('', libName, files[0])]
: files.map(file => createElement(prefix, file, file, isAsync)).join('\n')
+ function resolveImportPath (mod) {
+ return require.resolve(mod).replace(/\\/g, '\\\\')
+ }
+
const content = `
import './setPublicPath'
import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
// runtime shared by every component chunk
-import 'css-loader/dist/runtime/api.js'
-import 'vue-style-loader/lib/addStylesShadow'
-import 'vue-loader/lib/runtime/componentNormalizer'
+import '${resolveImportPath('css-loader/dist/runtime/api.js')}'
+import '${resolveImportPath('vue-style-loader/lib/addStylesShadow')}'
+import '${resolveImportPath('vue-loader-v15/lib/runtime/componentNormalizer')}'
${elements}`.trim()
- fs.writeFileSync(filePath, content)
- return filePath
+
+ return {
+ filePath: filePath,
+ content: content
+ }
}
diff --git a/packages/@vue/cli-service/lib/commands/build/setPublicPath.js b/packages/@vue/cli-service/lib/commands/build/setPublicPath.js
index e298abdc47..47147d79af 100644
--- a/packages/@vue/cli-service/lib/commands/build/setPublicPath.js
+++ b/packages/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
diff --git a/packages/@vue/cli-service/lib/commands/serve.js b/packages/@vue/cli-service/lib/commands/serve.js
index 571ea7fe50..430096f925 100644
--- a/packages/@vue/cli-service/lib/commands/serve.js
+++ b/packages/@vue/cli-service/lib/commands/serve.js
@@ -66,7 +66,7 @@ module.exports = (api, options) => {
if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
webpackConfig
.plugin('progress')
- .use(require('webpack/lib/ProgressPlugin'))
+ .use(webpack.ProgressPlugin)
}
}
})
@@ -112,6 +112,7 @@ module.exports = (api, options) => {
? rawPublicUrl
: `${protocol}://${rawPublicUrl}`
: null
+ const publicHost = publicUrl ? /^[a-zA-Z]+:\/\/([^/?#]+)/.exec(publicUrl)[1] : undefined
const urls = prepareURLs(
protocol,
@@ -174,6 +175,10 @@ module.exports = (api, options) => {
clientLogLevel: 'silent',
historyApiFallback: {
disableDotRule: true,
+ htmlAcceptHeaders: [
+ 'text/html',
+ 'application/xhtml+xml'
+ ],
rewrites: genHistoryApiFallbackRewrites(options.publicPath, options.pages)
},
contentBase: api.resolve('public'),
@@ -188,6 +193,7 @@ module.exports = (api, options) => {
}, projectDevServerOptions, {
https: useHttps,
proxy: proxySettings,
+ public: publicHost,
// eslint-disable-next-line no-shadow
before (app, server) {
// launch editor support.
diff --git a/packages/@vue/cli-service/lib/config/app.js b/packages/@vue/cli-service/lib/config/app.js
index 08f4346806..ad5d9aa758 100644
--- a/packages/@vue/cli-service/lib/config/app.js
+++ b/packages/@vue/cli-service/lib/config/app.js
@@ -1,6 +1,7 @@
// config that are specific to --target app
const fs = require('fs')
const path = require('path')
+const { semver } = require('@vue/cli-shared-utils')
// ensure the filename passed to html-webpack-plugin is a relative path
// because it cannot correctly handle absolute paths
@@ -13,6 +14,9 @@ function ensureRelative (outputDir, _path) {
}
module.exports = (api, options) => {
+ const webpack = require('webpack')
+ const webpackMajor = semver.major(webpack.version)
+
api.chainWebpack(webpackConfig => {
// only apply when there's no alternative target
if (process.env.VUE_CLI_BUILD_TARGET && process.env.VUE_CLI_BUILD_TARGET !== 'app') {
@@ -35,8 +39,8 @@ module.exports = (api, options) => {
// code splitting
if (process.env.NODE_ENV !== 'test') {
- webpackConfig
- .optimization.splitChunks({
+ if (webpackMajor === 4) {
+ webpackConfig.optimization.splitChunks({
cacheGroups: {
vendors: {
name: `chunk-vendors`,
@@ -53,43 +57,38 @@ module.exports = (api, options) => {
}
}
})
- }
-
- // HTML plugin
- const resolveClientEnv = require('../util/resolveClientEnv')
-
- // #1669 html-webpack-plugin's default sort uses toposort which cannot
- // handle cyclic deps in certain cases. Monkey patch it to handle the case
- // before we can upgrade to its 4.0 version (incompatible with preload atm)
- const chunkSorters = require('html-webpack-plugin/lib/chunksorter')
- const depSort = chunkSorters.dependency
- chunkSorters.auto = chunkSorters.dependency = (chunks, ...args) => {
- try {
- return depSort(chunks, ...args)
- } catch (e) {
- // fallback to a manual sort if that happens...
- return chunks.sort((a, b) => {
- // make sure user entry is loaded last so user CSS can override
- // vendor CSS
- if (a.id === 'app') {
- return 1
- } else if (b.id === 'app') {
- return -1
- } else if (a.entry !== b.entry) {
- return b.entry ? -1 : 1
+ } else {
+ webpackConfig.optimization.splitChunks({
+ cacheGroups: {
+ defaultVendors: {
+ name: `chunk-vendors`,
+ test: /[\\/]node_modules[\\/]/,
+ priority: -10,
+ chunks: 'initial'
+ },
+ common: {
+ name: `chunk-common`,
+ minChunks: 2,
+ priority: -20,
+ chunks: 'initial',
+ reuseExistingChunk: true
+ }
}
- return 0
})
}
}
+ // HTML plugin
+ const resolveClientEnv = require('../util/resolveClientEnv')
+
const htmlOptions = {
title: api.service.pkg.name,
- templateParameters: (compilation, assets, pluginOptions) => {
+ templateParameters: (compilation, assets, assetTags, pluginOptions) => {
// enhance html-webpack-plugin's built in template params
let stats
return Object.assign({
// make stats lazy as it is expensive
+ // TODO: not sure if it's still needed as of
get webpack () {
return stats || (stats = compilation.getStats().toJson())
},
@@ -116,22 +115,12 @@ module.exports = (api, options) => {
])
}
- if (isProd) {
- Object.assign(htmlOptions, {
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- collapseBooleanAttributes: true,
- removeScriptTypeAttributes: true
- // more options:
- // https://github.com/kangax/html-minifier#options-quick-reference
- }
- })
-
- // keep chunk ids stable so async chunks have consistent hash (#1916)
+ if (webpackMajor === 4 && isProd) {
+ // In webpack 5, optimization.chunkIds is set to `deterministic` by default in production
+ // In webpack 4, we use the following trick to keep chunk ids stable so async chunks have consistent hash (#1916)
webpackConfig
.plugin('named-chunks')
- .use(require('webpack/lib/NamedChunksPlugin'), [chunk => {
+ .use(webpack.NamedChunksPlugin, [chunk => {
if (chunk.name) {
return chunk.name
}
@@ -146,11 +135,11 @@ module.exports = (api, options) => {
// resolve HTML file(s)
const HTMLPlugin = require('html-webpack-plugin')
- const PreloadPlugin = require('@vue/preload-webpack-plugin')
+ // const PreloadPlugin = require('@vue/preload-webpack-plugin')
const multiPageConfig = options.pages
const htmlPath = api.resolve('public/index.html')
const defaultHtmlPath = path.resolve(__dirname, 'index-default.html')
- const publicCopyIgnore = ['.DS_Store']
+ const publicCopyIgnore = ['**/.DS_Store']
if (!multiPageConfig) {
// default, single page setup.
@@ -158,32 +147,30 @@ module.exports = (api, options) => {
? htmlPath
: defaultHtmlPath
- publicCopyIgnore.push({
- glob: path.relative(api.resolve('public'), api.resolve(htmlOptions.template)),
- matchBase: false
- })
+ publicCopyIgnore.push(api.resolve(htmlOptions.template).replace(/\\/g, '/'))
webpackConfig
.plugin('html')
.use(HTMLPlugin, [htmlOptions])
- if (!isLegacyBundle) {
- // inject preload/prefetch to HTML
- webpackConfig
- .plugin('preload')
- .use(PreloadPlugin, [{
- rel: 'preload',
- include: 'initial',
- fileBlacklist: [/\.map$/, /hot-update\.js$/]
- }])
+ // FIXME: preload plugin is not compatible with webpack 5 / html-webpack-plugin 4 yet
+ // if (!isLegacyBundle) {
+ // // inject preload/prefetch to HTML
+ // webpackConfig
+ // .plugin('preload')
+ // .use(PreloadPlugin, [{
+ // rel: 'preload',
+ // include: 'initial',
+ // fileBlacklist: [/\.map$/, /hot-update\.js$/]
+ // }])
- webpackConfig
- .plugin('prefetch')
- .use(PreloadPlugin, [{
- rel: 'prefetch',
- include: 'asyncChunks'
- }])
- }
+ // webpackConfig
+ // .plugin('prefetch')
+ // .use(PreloadPlugin, [{
+ // rel: 'prefetch',
+ // include: 'asyncChunks'
+ // }])
+ // }
} else {
// multi-page setup
webpackConfig.entryPoints.clear()
@@ -225,10 +212,7 @@ module.exports = (api, options) => {
? htmlPath
: defaultHtmlPath
- publicCopyIgnore.push({
- glob: path.relative(api.resolve('public'), api.resolve(templatePath)),
- matchBase: false
- })
+ publicCopyIgnore.push(api.resolve(templatePath).replace(/\\/g, '/'))
// inject html plugin for the page
const pageHtmlOptions = Object.assign(
@@ -247,36 +231,37 @@ module.exports = (api, options) => {
.use(HTMLPlugin, [pageHtmlOptions])
})
- if (!isLegacyBundle) {
- pages.forEach(name => {
- const filename = ensureRelative(
- outputDir,
- normalizePageConfig(multiPageConfig[name]).filename || `${name}.html`
- )
- webpackConfig
- .plugin(`preload-${name}`)
- .use(PreloadPlugin, [{
- rel: 'preload',
- includeHtmlNames: [filename],
- include: {
- type: 'initial',
- entries: [name]
- },
- fileBlacklist: [/\.map$/, /hot-update\.js$/]
- }])
+ // FIXME: preload plugin is not compatible with webpack 5 / html-webpack-plugin 4 yet
+ // if (!isLegacyBundle) {
+ // pages.forEach(name => {
+ // const filename = ensureRelative(
+ // outputDir,
+ // normalizePageConfig(multiPageConfig[name]).filename || `${name}.html`
+ // )
+ // webpackConfig
+ // .plugin(`preload-${name}`)
+ // .use(PreloadPlugin, [{
+ // rel: 'preload',
+ // includeHtmlNames: [filename],
+ // include: {
+ // type: 'initial',
+ // entries: [name]
+ // },
+ // fileBlacklist: [/\.map$/, /hot-update\.js$/]
+ // }])
- webpackConfig
- .plugin(`prefetch-${name}`)
- .use(PreloadPlugin, [{
- rel: 'prefetch',
- includeHtmlNames: [filename],
- include: {
- type: 'asyncChunks',
- entries: [name]
- }
- }])
- })
- }
+ // webpackConfig
+ // .plugin(`prefetch-${name}`)
+ // .use(PreloadPlugin, [{
+ // rel: 'prefetch',
+ // includeHtmlNames: [filename],
+ // include: {
+ // type: 'asyncChunks',
+ // entries: [name]
+ // }
+ // }])
+ // })
+ // }
}
// CORS and Subresource Integrity
@@ -295,12 +280,16 @@ module.exports = (api, options) => {
if (!isLegacyBundle && fs.existsSync(publicDir)) {
webpackConfig
.plugin('copy')
- .use(require('copy-webpack-plugin'), [[{
- from: publicDir,
- to: outputDir,
- toType: 'dir',
- ignore: publicCopyIgnore
- }]])
+ .use(require('copy-webpack-plugin'), [{
+ patterns: [{
+ from: publicDir,
+ to: outputDir,
+ toType: 'dir',
+ globOptions: {
+ ignore: publicCopyIgnore
+ }
+ }]
+ }])
}
})
}
diff --git a/packages/@vue/cli-service/lib/config/assets.js b/packages/@vue/cli-service/lib/config/assets.js
new file mode 100644
index 0000000000..780d1f23bd
--- /dev/null
+++ b/packages/@vue/cli-service/lib/config/assets.js
@@ -0,0 +1,70 @@
+/** @type {import('@vue/cli-service').ServicePlugin} */
+module.exports = (api, options) => {
+ const getAssetPath = require('../util/getAssetPath')
+ const getVueMajor = require('../util/getVueMajor')
+
+ const inlineLimit = 4096
+
+ const vueMajor = getVueMajor(api.getCwd())
+ const supportsEsModuleAsset = (vueMajor !== 2)
+
+ const genAssetSubPath = dir => {
+ return getAssetPath(
+ options,
+ `${dir}/[name]${options.filenameHashing ? '.[hash:8]' : ''}.[ext]`
+ )
+ }
+
+ // TODO: use asset modules for webpack 5
+ //
+
+ const genUrlLoaderOptions = dir => {
+ return {
+ limit: inlineLimit,
+ esModule: supportsEsModuleAsset,
+ // use explicit fallback to avoid regression in url-loader>=1.1.0
+ fallback: {
+ loader: require.resolve('file-loader'),
+ options: {
+ name: genAssetSubPath(dir),
+ esModule: supportsEsModuleAsset
+ }
+ }
+ }
+ }
+
+ api.chainWebpack(webpackConfig => {
+ webpackConfig.module
+ .rule('images')
+ .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
+ .use('url-loader')
+ .loader(require.resolve('url-loader'))
+ .options(genUrlLoaderOptions('img'))
+
+ // do not base64-inline SVGs.
+ // https://github.com/facebookincubator/create-react-app/pull/1180
+ webpackConfig.module
+ .rule('svg')
+ .test(/\.(svg)(\?.*)?$/)
+ .use('file-loader')
+ .loader(require.resolve('file-loader'))
+ .options({
+ name: genAssetSubPath('img'),
+ esModule: supportsEsModuleAsset
+ })
+
+ webpackConfig.module
+ .rule('media')
+ .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
+ .use('url-loader')
+ .loader(require.resolve('url-loader'))
+ .options(genUrlLoaderOptions('media'))
+
+ webpackConfig.module
+ .rule('fonts')
+ .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
+ .use('url-loader')
+ .loader(require.resolve('url-loader'))
+ .options(genUrlLoaderOptions('fonts'))
+ })
+}
diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js
index 6aac0c8e76..98e57a43ad 100644
--- a/packages/@vue/cli-service/lib/config/base.js
+++ b/packages/@vue/cli-service/lib/config/base.js
@@ -1,30 +1,23 @@
-const { semver, loadModule } = require('@vue/cli-shared-utils')
+const path = require('path')
+const { semver } = require('@vue/cli-shared-utils')
+/** @type {import('@vue/cli-service').ServicePlugin} */
module.exports = (api, options) => {
+ const cwd = api.getCwd()
+ const webpack = require('webpack')
+ const webpackMajor = semver.major(webpack.version)
+ const vueMajor = require('../util/getVueMajor')(cwd)
+
api.chainWebpack(webpackConfig => {
const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
const resolveLocal = require('../util/resolveLocal')
- const getAssetPath = require('../util/getAssetPath')
- const inlineLimit = 4096
-
- const genAssetSubPath = dir => {
- return getAssetPath(
- options,
- `${dir}/[name]${options.filenameHashing ? '.[hash:8]' : ''}.[ext]`
- )
- }
- const genUrlLoaderOptions = dir => {
- return {
- limit: inlineLimit,
- // use explicit fallback to avoid regression in url-loader>=1.1.0
- fallback: {
- loader: require.resolve('file-loader'),
- options: {
- name: genAssetSubPath(dir)
- }
- }
- }
+ // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
+ if (webpackMajor !== 4) {
+ webpackConfig.module
+ .rule('esm')
+ .test(/\.m?jsx?$/)
+ .resolve.set('fullySpecified', false)
}
webpackConfig
@@ -39,10 +32,6 @@ module.exports = (api, options) => {
.publicPath(options.publicPath)
webpackConfig.resolve
- // This plugin can be removed once we switch to Webpack 6
- .plugin('pnp')
- .use({ ...require('pnp-webpack-plugin') })
- .end()
.extensions
.merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
.end()
@@ -69,14 +58,10 @@ module.exports = (api, options) => {
// js is handled by cli-plugin-babel ---------------------------------------
// vue-loader --------------------------------------------------------------
- // try to load vue in the project
- // fallback to peer vue package in the instant prototyping environment
- const vue = loadModule('vue', api.service.context) || loadModule('vue', __dirname)
-
- if (vue && semver.major(vue.version) === 2) {
+ if (vueMajor === 2) {
// for Vue 2 projects
const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
- 'vue-loader': require('vue-loader/package.json').version,
+ 'vue-loader': require('vue-loader-v15/package.json').version,
'@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
'vue-template-compiler': require('vue-template-compiler/package.json').version
})
@@ -98,7 +83,7 @@ module.exports = (api, options) => {
.options(vueLoaderCacheConfig)
.end()
.use('vue-loader')
- .loader(require.resolve('vue-loader'))
+ .loader(require.resolve('vue-loader-v15'))
.options(Object.assign({
compilerOptions: {
whitespace: 'condense'
@@ -107,11 +92,20 @@ module.exports = (api, options) => {
webpackConfig
.plugin('vue-loader')
- .use(require('vue-loader').VueLoaderPlugin)
- } else if (vue && semver.major(vue.version) === 3) {
+ .use(require('vue-loader-v15').VueLoaderPlugin)
+
+ // some plugins may implicitly relies on the `vue-loader` dependency path name
+ // such as vue-cli-plugin-apollo
+ //
+ // so we need a hotfix for that
+ webpackConfig
+ .resolveLoader
+ .modules
+ .prepend(path.resolve(__dirname, './vue-loader-v15-resolve-compat'))
+ } else if (vueMajor === 3) {
// for Vue 3 projects
const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
- 'vue-loader': require('vue-loader-v16/package.json').version,
+ 'vue-loader': require('vue-loader/package.json').version,
'@vue/compiler-sfc': require('@vue/compiler-sfc/package.json').version
})
@@ -132,7 +126,7 @@ module.exports = (api, options) => {
.options(vueLoaderCacheConfig)
.end()
.use('vue-loader')
- .loader(require.resolve('vue-loader-v16'))
+ .loader(require.resolve('vue-loader'))
.options({
...vueLoaderCacheConfig,
babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
@@ -142,53 +136,18 @@ module.exports = (api, options) => {
webpackConfig
.plugin('vue-loader')
- .use(require('vue-loader-v16').VueLoaderPlugin)
+ .use(require('vue-loader').VueLoaderPlugin)
// feature flags
webpackConfig
.plugin('feature-flags')
- .use(require('webpack').DefinePlugin, [{
+ .use(webpack.DefinePlugin, [{
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false'
}])
}
- // static assets -----------------------------------------------------------
-
- webpackConfig.module
- .rule('images')
- .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
- .use('url-loader')
- .loader(require.resolve('url-loader'))
- .options(genUrlLoaderOptions('img'))
-
- // do not base64-inline SVGs.
- // https://github.com/facebookincubator/create-react-app/pull/1180
- webpackConfig.module
- .rule('svg')
- .test(/\.(svg)(\?.*)?$/)
- .use('file-loader')
- .loader(require.resolve('file-loader'))
- .options({
- name: genAssetSubPath('img')
- })
-
- webpackConfig.module
- .rule('media')
- .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
- .use('url-loader')
- .loader(require.resolve('url-loader'))
- .options(genUrlLoaderOptions('media'))
-
- webpackConfig.module
- .rule('fonts')
- .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
- .use('url-loader')
- .loader(require.resolve('url-loader'))
- .options(genUrlLoaderOptions('fonts'))
-
// Other common pre-processors ---------------------------------------------
-
const maybeResolve = name => {
try {
return require.resolve(name)
@@ -215,29 +174,39 @@ module.exports = (api, options) => {
.end()
.end()
- // shims
-
- webpackConfig.node
- .merge({
- // prevent webpack from injecting useless setImmediate polyfill because Vue
- // source contains it (although only uses it if it's native).
- setImmediate: false,
- // process is injected via DefinePlugin, although some 3rd party
- // libraries may require a mock to work properly (#934)
- process: 'mock',
- // prevent webpack from injecting mocks to Node native modules
- // that does not make sense for the client
- dgram: 'empty',
- fs: 'empty',
- net: 'empty',
- tls: 'empty',
- child_process: 'empty'
- })
+ if (webpackMajor === 4) {
+ // Node.js polyfills
+ // They are not polyfilled by default in webpack 5
+ //
+ // In webpack 4, we used to disabled many of the core module polyfills too
+ webpackConfig.node
+ .merge({
+ // prevent webpack from injecting useless setImmediate polyfill because Vue
+ // source contains it (although only uses it if it's native).
+ setImmediate: false,
+ // process is injected via DefinePlugin, although some 3rd party
+ // libraries may require a mock to work properly (#934)
+ process: 'mock',
+ // prevent webpack from injecting mocks to Node native modules
+ // that does not make sense for the client
+ dgram: 'empty',
+ fs: 'empty',
+ net: 'empty',
+ tls: 'empty',
+ child_process: 'empty'
+ })
+
+ // Yarn PnP / Yarn 2 support
+ webpackConfig.resolve
+ .plugin('pnp')
+ .use({ ...require('pnp-webpack-plugin') })
+ .end()
+ }
const resolveClientEnv = require('../util/resolveClientEnv')
webpackConfig
.plugin('define')
- .use(require('webpack').DefinePlugin, [
+ .use(webpack.DefinePlugin, [
resolveClientEnv(options)
])
diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js
index 8ed83f57c2..b942cafd61 100644
--- a/packages/@vue/cli-service/lib/config/css.js
+++ b/packages/@vue/cli-service/lib/config/css.js
@@ -1,6 +1,6 @@
const fs = require('fs')
const path = require('path')
-const { semver, warn, pauseSpinner, resumeSpinner } = require('@vue/cli-shared-utils')
+const isAbsoluteUrl = require('../util/isAbsoluteUrl')
const findExisting = (context, files) => {
for (const file of files) {
@@ -16,25 +16,6 @@ module.exports = (api, rootOptions) => {
const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
const isProd = process.env.NODE_ENV === 'production'
- let sassLoaderVersion
- try {
- sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
- } catch (e) {}
- if (sassLoaderVersion < 8) {
- pauseSpinner()
- warn('A new version of sass-loader is available. Please upgrade for best experience.')
- resumeSpinner()
- }
-
- const defaultSassLoaderOptions = {}
- try {
- defaultSassLoaderOptions.implementation = require('sass')
- // since sass-loader 8, fibers will be automatically detected and used
- if (sassLoaderVersion < 8) {
- defaultSassLoaderOptions.fiber = require('fibers')
- }
- } catch (e) {}
-
const {
extract = isProd,
sourceMap = false,
@@ -59,16 +40,19 @@ module.exports = (api, rootOptions) => {
chunkFilename: filename
}, extract && typeof extract === 'object' ? extract : {})
+ // when project publicPath is a relative path
// use relative publicPath in extracted CSS based on extract location
- const cssPublicPath = process.env.VUE_CLI_BUILD_TARGET === 'lib'
- // in lib mode, CSS is extracted to dist root.
- ? './'
- : '../'.repeat(
- extractOptions.filename
- .replace(/^\.[\/\\]/, '')
- .split(/[\/\\]/g)
+ const cssPublicPath = (isAbsoluteUrl(rootOptions.publicPath) || rootOptions.publicPath.startsWith('/'))
+ ? rootOptions.publicPath
+ : process.env.VUE_CLI_BUILD_TARGET === 'lib'
+ // in lib mode, CSS is extracted to dist root.
+ ? './'
+ : '../'.repeat(
+ extractOptions.filename
+ .replace(/^\.[/\\]/, '')
+ .split(/[/\\]/g)
.length - 1
- )
+ )
// check if the project has a valid postcss config
// if it doesn't, don't use postcss-loader for direct style imports
@@ -83,9 +67,11 @@ module.exports = (api, rootOptions) => {
if (!hasPostCSSConfig) {
loaderOptions.postcss = {
- plugins: [
- require('autoprefixer')
- ]
+ postcssOptions: {
+ plugins: [
+ require('autoprefixer')
+ ]
+ }
}
}
@@ -129,8 +115,9 @@ module.exports = (api, rootOptions) => {
.use('extract-css-loader')
.loader(require('mini-css-extract-plugin').loader)
.options({
- hmr: !isProd,
- publicPath: cssPublicPath
+ publicPath: cssPublicPath,
+ // TODO: enable this option later
+ esModule: false
})
} else {
rule
@@ -171,7 +158,9 @@ module.exports = (api, rootOptions) => {
.loader(require.resolve('postcss-loader'))
.options({
sourceMap,
- plugins: [require('cssnano')(cssnanoOptions)]
+ postcssOptions: {
+ plugins: [require('cssnano')(cssnanoOptions)]
+ }
})
}
@@ -200,38 +189,23 @@ module.exports = (api, rootOptions) => {
createCSSRule('postcss', /\.p(ost)?css$/)
createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(
{},
- defaultSassLoaderOptions,
loaderOptions.scss || loaderOptions.sass
))
- if (sassLoaderVersion < 8) {
- createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
- {},
- defaultSassLoaderOptions,
- {
- indentedSyntax: true
- },
- loaderOptions.sass
- ))
- } else {
- createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
- {},
- defaultSassLoaderOptions,
- loaderOptions.sass,
- {
- sassOptions: Object.assign(
- {},
- loaderOptions.sass && loaderOptions.sass.sassOptions,
- {
- indentedSyntax: true
- }
- )
- }
- ))
- }
+ createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
+ {},
+ loaderOptions.sass,
+ {
+ sassOptions: Object.assign(
+ {},
+ loaderOptions.sass && loaderOptions.sass.sassOptions,
+ {
+ indentedSyntax: true
+ }
+ )
+ }
+ ))
createCSSRule('less', /\.less$/, 'less-loader', loaderOptions.less)
- createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', Object.assign({
- preferPathResolver: 'webpack'
- }, loaderOptions.stylus))
+ createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', loaderOptions.stylus)
// inject CSS extraction plugin
if (shouldExtract) {
@@ -240,14 +214,13 @@ module.exports = (api, rootOptions) => {
.use(require('mini-css-extract-plugin'), [extractOptions])
// minify extracted CSS
- if (isProd) {
- webpackConfig
- .plugin('optimize-css')
- .use(require('@intervolga/optimize-cssnano-plugin'), [{
- sourceMap: rootOptions.productionSourceMap && sourceMap,
- cssnanoOptions
- }])
- }
+ webpackConfig.optimization
+ .minimizer('css')
+ .use(require('css-minimizer-webpack-plugin'), [{
+ parallel: rootOptions.parallel,
+ sourceMap: rootOptions.productionSourceMap && sourceMap,
+ minimizerOptions: cssnanoOptions
+ }])
}
})
}
diff --git a/packages/@vue/cli-service/lib/config/index-default.html b/packages/@vue/cli-service/lib/config/index-default.html
index 73453d6011..53faecd1b0 100644
--- a/packages/@vue/cli-service/lib/config/index-default.html
+++ b/packages/@vue/cli-service/lib/config/index-default.html
@@ -1,5 +1,5 @@
-
+
diff --git a/packages/@vue/cli-service/lib/config/prod.js b/packages/@vue/cli-service/lib/config/prod.js
index 64c966f4f5..e684331bdf 100644
--- a/packages/@vue/cli-service/lib/config/prod.js
+++ b/packages/@vue/cli-service/lib/config/prod.js
@@ -1,3 +1,4 @@
+/** @type {import('@vue/cli-service').ServicePlugin} */
module.exports = (api, options) => {
api.chainWebpack(webpackConfig => {
if (process.env.NODE_ENV === 'production') {
@@ -5,15 +6,23 @@ module.exports = (api, options) => {
.mode('production')
.devtool(options.productionSourceMap ? 'source-map' : false)
- // keep module.id stable when vendor modules does not change
- webpackConfig
- .plugin('hash-module-ids')
- .use(require('webpack/lib/HashedModuleIdsPlugin'), [{
- hashDigest: 'hex'
- }])
+ const { semver } = require('@vue/cli-shared-utils')
+ const webpack = require('webpack')
+ const webpackMajor = semver.major(webpack.version)
+
+ // DeterministicModuleIdsPlugin is only available in webpack 5
+ // (and enabled by default in production mode).
+
+ // In webpack 4, we need HashedModuleIdsPlugin
+ // to keep module.id stable when vendor modules does not change.
+ // It is "the second best solution for long term caching".
+ //
+ if (webpackMajor === 4) {
+ webpackConfig.optimization.set('hashedModuleIds', true)
+ }
// disable optimization during tests to speed things up
- if (process.env.VUE_CLI_TEST) {
+ if (process.env.VUE_CLI_TEST && !process.env.VUE_CLI_TEST_MINIMIZE) {
webpackConfig.optimization.minimize(false)
}
}
diff --git a/packages/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js b/packages/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js
new file mode 100644
index 0000000000..ff938a5bb9
--- /dev/null
+++ b/packages/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js
@@ -0,0 +1 @@
+module.exports = require('vue-loader-v15')
diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js
index fad7a32341..661b9a8684 100644
--- a/packages/@vue/cli-service/lib/options.js
+++ b/packages/@vue/cli-service/lib/options.js
@@ -9,32 +9,39 @@ const schema = createSchema(joi => joi.object({
runtimeCompiler: joi.boolean(),
transpileDependencies: joi.array(),
productionSourceMap: joi.boolean(),
- parallel: joi.alternatives().try([
+ parallel: joi.alternatives().try(
joi.boolean(),
joi.number().integer()
- ]),
+ ),
devServer: joi.object(),
pages: joi.object().pattern(
/\w+/,
- joi.alternatives().try([
+ joi.alternatives().try(
joi.string().required(),
joi.array().items(joi.string().required()),
joi.object().keys({
- entry: joi.alternatives().try([
+ entry: joi.alternatives().try(
joi.string().required(),
joi.array().items(joi.string().required())
- ]).required()
+ ).required()
}).unknown(true)
- ])
+ )
),
- crossorigin: joi.string().valid(['', 'anonymous', 'use-credentials']),
+ crossorigin: joi.string().valid('', 'anonymous', 'use-credentials'),
integrity: joi.boolean(),
// css
css: joi.object({
- // TODO: deprecate this after joi 16 release
- modules: joi.boolean(),
+ modules:
+ joi.boolean()
+ .warning('deprecate.error', {
+ message: 'Please use `css.requireModuleExtension` instead.'
+ })
+ .message({
+ 'deprecate.error':
+ 'The {#label} option in vue.config.js is deprecated. {#message}'
+ }),
requireModuleExtension: joi.boolean(),
extract: joi.alternatives().try(joi.boolean(), joi.object()),
sourceMap: joi.boolean(),
@@ -56,7 +63,7 @@ const schema = createSchema(joi => joi.object({
),
// known runtime options for built-in plugins
- lintOnSave: joi.any().valid([true, false, 'error', 'warning', 'default']),
+ lintOnSave: joi.any().valid(true, false, 'error', 'warning', 'default'),
pwa: joi.object(),
// 3rd party plugin options
diff --git a/packages/@vue/cli-service/lib/util/checkWebpack.js b/packages/@vue/cli-service/lib/util/checkWebpack.js
new file mode 100644
index 0000000000..aab5d83c11
--- /dev/null
+++ b/packages/@vue/cli-service/lib/util/checkWebpack.js
@@ -0,0 +1,67 @@
+const path = require('path')
+const { warn, loadModule, resolveModule } = require('@vue/cli-shared-utils')
+const moduleAlias = require('module-alias')
+
+/**
+ * If the user has installed a version of webpack themself, load it.
+ * Otherwise, load the webpack that @vue/cli-service depends on.
+ * @param {string} cwd the user project root
+ * @returns {import('webpack')} note: the return type is for webpack 5 only
+ */
+module.exports = function checkWebpack (cwd) {
+ // Jest module alias can't affect sub-processes, so we have to alias it manually
+ if (
+ process.env.VUE_CLI_TEST &&
+ process.env.VUE_CLI_USE_WEBPACK4 &&
+ require('webpack/package.json').version[0] !== '4'
+ ) {
+ const webpack4Path = path.dirname(require.resolve('webpack-4/package.json'))
+
+ moduleAlias.addAlias('webpack', (fromPath, request) => {
+ if (fromPath.includes('webpack-dev-server')) {
+ return 'webpack'
+ }
+
+ return webpack4Path
+ })
+
+ return
+ }
+
+ // Check the package.json,
+ // and only load from the project if webpack is explictly depended on,
+ // in case of accidental hoisting.
+ let pkg = {}
+ try {
+ pkg = loadModule('./package.json', cwd)
+ } catch (e) {}
+
+ const deps = {
+ ...pkg.dependencies,
+ ...pkg.devDependencies,
+ ...pkg.optionalDependencies
+ }
+
+ if (deps.webpack) {
+ const customWebpackVersion = loadModule('webpack/package.json', cwd).version
+ const requiredWebpackVersion = require('webpack/package.json').version
+
+ // A custom webpack version is found but no force resolutions used.
+ // So the webpack version in this package is still 5.x.
+ // This may cause problems for loaders/plugins required in this package.
+ // Because many uses runtime sniffing to run conditional code for different webpack versions.
+ if (customWebpackVersion !== requiredWebpackVersion) {
+ // TODO: recommend users to use yarn force resolutions or pnpm hooks instead
+ warn(`Using "module-alias" to load custom webpack version.`)
+
+ const webpack4Path = path.dirname(resolveModule('webpack/package.json', cwd))
+ moduleAlias.addAlias('webpack', (fromPath, request) => {
+ if (fromPath.includes('webpack-dev-server')) {
+ return 'webpack'
+ }
+
+ return webpack4Path
+ })
+ }
+ }
+}
diff --git a/packages/@vue/cli-service/lib/util/getVueMajor.js b/packages/@vue/cli-service/lib/util/getVueMajor.js
new file mode 100644
index 0000000000..ff9a8a3b7a
--- /dev/null
+++ b/packages/@vue/cli-service/lib/util/getVueMajor.js
@@ -0,0 +1,13 @@
+const { semver, loadModule } = require('@vue/cli-shared-utils')
+
+/**
+ * Get the major Vue version that the user project uses
+ * @param {string} cwd the user project root
+ * @returns {2|3}
+ */
+module.exports = function getVueMajor (cwd) {
+ const vue = loadModule('vue', cwd)
+ // TODO: make Vue 3 the default version
+ const vueMajor = vue ? semver.major(vue.version) : 2
+ return vueMajor
+}
diff --git a/packages/@vue/cli-service/lib/util/isAbsoluteUrl.js b/packages/@vue/cli-service/lib/util/isAbsoluteUrl.js
index a163b09521..2aac5c71df 100644
--- a/packages/@vue/cli-service/lib/util/isAbsoluteUrl.js
+++ b/packages/@vue/cli-service/lib/util/isAbsoluteUrl.js
@@ -1,4 +1,4 @@
module.exports = function isAbsoluteUrl (url) {
// A URL is considered absolute if it begins with "://" or "//"
- return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
+ return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
}
diff --git a/packages/@vue/cli-service/lib/util/prepareProxy.js b/packages/@vue/cli-service/lib/util/prepareProxy.js
index df8d8accb4..a65f0f6341 100644
--- a/packages/@vue/cli-service/lib/util/prepareProxy.js
+++ b/packages/@vue/cli-service/lib/util/prepareProxy.js
@@ -120,7 +120,7 @@ module.exports = function prepareProxy (proxy, appPublicFolder) {
// Otherwise, proxy is an object so create an array of proxies to pass to webpackDevServer
return Object.keys(proxy).map(context => {
const config = proxy[context]
- if (!config.hasOwnProperty('target')) {
+ if (!Object.prototype.hasOwnProperty.call(config, 'target')) {
console.log(
chalk.red(
'When `proxy` in package.json is an object, each `context` object must have a ' +
@@ -135,7 +135,7 @@ module.exports = function prepareProxy (proxy, appPublicFolder) {
}
function resolveLoopback (proxy) {
- const o = url.parse(proxy)
+ const o = new url.URL(proxy)
o.host = undefined
if (o.hostname !== 'localhost') {
return proxy
@@ -148,7 +148,7 @@ function resolveLoopback (proxy) {
o.hostname = address.ipv6() ? '::1' : '127.0.0.1';
} catch (_ignored) {
o.hostname = '127.0.0.1';
- }*/
+ } */
try {
// Check if we're on a network; if we are, chances are we can resolve
diff --git a/packages/@vue/cli-service/lib/webpack/CorsPlugin.js b/packages/@vue/cli-service/lib/webpack/CorsPlugin.js
index 51ee44b525..9cd317678b 100644
--- a/packages/@vue/cli-service/lib/webpack/CorsPlugin.js
+++ b/packages/@vue/cli-service/lib/webpack/CorsPlugin.js
@@ -1,3 +1,5 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
module.exports = class CorsPlugin {
constructor ({ publicPath, crossorigin, integrity }) {
this.crossorigin = crossorigin
@@ -22,8 +24,8 @@ module.exports = class CorsPlugin {
}
}
- compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(ID, data => {
- const tags = [...data.head, ...data.body]
+ HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, data => {
+ const tags = [...data.headTags, ...data.bodyTags]
if (this.crossorigin != null) {
tags.forEach(tag => {
if (tag.tagName === 'script' || tag.tagName === 'link') {
@@ -50,7 +52,7 @@ module.exports = class CorsPlugin {
// the preloaded resource, and causes the files to be downloaded twice.
// this is a Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=677022)
// for now we disable preload if SRI is used.
- data.head = data.head.filter(tag => {
+ data.headTags = data.headTags.filter(tag => {
return !(
tag.tagName === 'link' &&
tag.attributes.rel === 'preload'
@@ -59,7 +61,7 @@ module.exports = class CorsPlugin {
}
})
- compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap(ID, data => {
+ HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tap(ID, data => {
data.html = data.html.replace(/\scrossorigin=""/g, ' crossorigin')
})
})
diff --git a/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js b/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
index 21e318ae2b..3364e1ffab 100644
--- a/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
+++ b/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
@@ -48,6 +48,7 @@ class DashboardPlugin {
apply (compiler) {
let sendData = this.sendData
let timer
+ let inProgress = false
let assetSources = new Map()
@@ -63,6 +64,13 @@ class DashboardPlugin {
// Progress status
let progressTime = Date.now()
const progressPlugin = new webpack.ProgressPlugin((percent, msg) => {
+ // in webpack 5, progress plugin will continue sending progresses even after the done hook
+ // for things like caching, causing the progress indicator stuck at 0.99
+ // so we have to use a flag to stop sending such `compiling` progress data
+ if (!inProgress) {
+ return
+ }
+
// Debouncing
const time = Date.now()
if (time - progressTime > 300) {
@@ -94,6 +102,7 @@ class DashboardPlugin {
})
compiler.hooks.compile.tap(ID, () => {
+ inProgress = true
timer = Date.now()
sendData([
@@ -136,13 +145,22 @@ class DashboardPlugin {
value: `idle${getTimeMessage(timer)}`
}
])
+ inProgress = false
})
compiler.hooks.afterEmit.tap(ID, compilation => {
assetSources = new Map()
for (const name in compilation.assets) {
const asset = compilation.assets[name]
- assetSources.set(name.replace(FILENAME_QUERY_REGEXP, ''), asset.source())
+ const filename = name.replace(FILENAME_QUERY_REGEXP, '')
+ try {
+ assetSources.set(filename, asset.source())
+ } catch (e) {
+ const webpackFs = compiler.outputFileSystem
+ const fullPath = (webpackFs.join || path.join)(compiler.options.output.path, filename)
+ const buf = webpackFs.readFileSync(fullPath)
+ assetSources.set(filename, buf.toString())
+ }
}
})
@@ -178,6 +196,7 @@ class DashboardPlugin {
value: `idle${getTimeMessage(timer)}`
}
])
+ inProgress = false
const statsFile = path.resolve(process.cwd(), `./node_modules/.stats-${this.type}.json`)
fs.writeJson(statsFile, {
diff --git a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
index faefe6e601..874b361338 100644
--- a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
+++ b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
@@ -1,5 +1,6 @@
const fs = require('fs-extra')
const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
// https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
@@ -23,7 +24,7 @@ class ModernModePlugin {
applyLegacy (compiler) {
const ID = `vue-cli-legacy-bundle`
compiler.hooks.compilation.tap(ID, compilation => {
- compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, async (data, cb) => {
+ HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, async (data, cb) => {
// get stats, write to disk
await fs.ensureDir(this.targetDir)
const htmlName = path.basename(data.plugin.options.filename)
@@ -31,7 +32,7 @@ class ModernModePlugin {
const htmlPath = path.dirname(data.plugin.options.filename)
const tempFilename = path.join(this.targetDir, htmlPath, `legacy-assets-${htmlName}.json`)
await fs.mkdirp(path.dirname(tempFilename))
- await fs.writeFile(tempFilename, JSON.stringify(data.body))
+ await fs.writeFile(tempFilename, JSON.stringify(data.bodyTags))
cb()
})
})
@@ -40,9 +41,9 @@ class ModernModePlugin {
applyModern (compiler) {
const ID = `vue-cli-modern-bundle`
compiler.hooks.compilation.tap(ID, compilation => {
- compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, async (data, cb) => {
+ HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, async (data, cb) => {
// use