Merge pull request #3743 from vuejs/next-minor

3.6

Author: haoqunjiang

docs/config/README.md

@@ -140,14 +140,16 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
 ### lintOnSave
 
-- Type: `boolean | 'error'`
+- Type: `boolean | 'warning' | 'default' | 'error'`
 - Default: `true`
 
   Whether to perform lint-on-save during development using [eslint-loader](https://github.com/webpack-contrib/eslint-loader). This value is respected only when [`@vue/cli-plugin-eslint`](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) is installed.
 
-  When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation.
+  When set to `true` or `'warning'`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.
 
-  To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail.
+  To make lint errors show up in the browser overlay, you can use `lintOnSave: 'default'`. This will force `eslint-loader` to actually emit errors. this also means lint errors will now cause the compilation to fail.
+
+  Setting it to `'errors'` will force eslint-loader to emit warnings as errors as well, which means warnings will also show up in the overlay.
 
   Alternatively, you can configure the overlay to display both warnings and errors:
 

docs/dev-guide/generator-api.md

@@ -97,6 +97,14 @@ Add a message to be printed when the generator exits (after any other standard m
 - **Usage**:
 Convenience method for generating a JS config file from JSON
 
+## makeJSOnlyValue
+
+- **Arguments**
+  - `{any} str` - JS expression as a string
+
+- **Usage**:
+Turns a string expression into executable JS for .js config files
+
 ## injectImports
 
 - **Arguments**

docs/guide/build-targets.md

@@ -13,10 +13,6 @@ App is the default build target. In this mode:
 
 ## Library
 
-::: tip Note on IE Compatibility
-In lib mode, the public path is [dynamically determined](https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/commands/build/setPublicPath.js) based on the URL from which the main js file is loaded (to enable dynamic assets loading). However, this feature requires `document.currentScript` support, which is missing in IE. So it's recommended to include the [current-script-polyfill](https://www.npmjs.com/package/current-script-polyfill) in the final web page before the library is imported, if IE support is a requirement.
-:::
-
 ::: tip Note on Vue Dependency
 In lib mode, Vue is *externalized*. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global `Vue` variable.
 :::

docs/guide/css.md

@@ -12,7 +12,7 @@ You can select pre-processors (Sass/Less/Stylus) when creating the project. If y
 
 ``` bash
 # Sass
-npm install -D sass-loader node-sass
+npm install -D sass-loader sass
 
 # Less
 npm install -D less-loader less
@@ -29,6 +29,14 @@ $color: red;
 </style>
 ```
 
+::: tip A Tip on Sass Performance
+Note that when using Dart Sass, **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path. To enable this, simply install `fibers` as a project dependency:
+```
+npm install -D fibers
+```
+Please also be aware, as it's a native module, there may be compatibility issues vary on the OS and build environment. In that case, please run `npm uninstall -D fibers` to fix the problem.
+:::
+
 ### Automatic imports
 
 If you want to automatically import files (for colors, variables, mixins...), you can use the [style-resources-loader](https://github.com/yenshih/style-resources-loader). Here is an example for stylus that imports `./src/styles/imports.styl` in every SFC and every stylus files:

packages/@vue/cli-plugin-eslint/index.js

@@ -17,7 +17,7 @@ module.exports = (api, options) => {
       'eslint-loader',
       {
         'eslint-loader': require('eslint-loader/package.json').version,
-        'eslint': eslintPkg.version
+        eslint: eslintPkg.version
       },
       [
         '.eslintrc.js',
@@ -30,7 +30,13 @@ module.exports = (api, options) => {
     )
 
     api.chainWebpack(webpackConfig => {
-      webpackConfig.resolveLoader.modules.prepend(path.join(__dirname, 'node_modules'))
+      webpackConfig.resolveLoader.modules.prepend(
+        path.join(__dirname, 'node_modules')
+      )
+
+      const { lintOnSave } = options
+      const allWarnings = lintOnSave === true || lintOnSave === 'warning'
+      const allErrors = lintOnSave === 'error'
 
       webpackConfig.module
         .rule('eslint')
@@ -46,8 +52,9 @@ module.exports = (api, options) => {
               extensions,
               cache: true,
               cacheIdentifier,
-              emitWarning: options.lintOnSave !== 'error',
-              emitError: options.lintOnSave === 'error',
+              emitWarning: allWarnings,
+              // only emit errors in production mode.
+              emitError: allErrors,
               eslintPath: resolveModule('eslint', cwd) || require.resolve('eslint'),
               formatter:
                 loadModule('eslint/lib/formatters/codeframe', cwd, true) ||
@@ -56,18 +63,25 @@ module.exports = (api, options) => {
     })
   }
 
-  api.registerCommand('lint', {
-    description: 'lint and fix source files',
-    usage: 'vue-cli-service lint [options] [...files]',
-    options: {
-      '--format [formatter]': 'specify formatter (default: codeframe)',
-      '--no-fix': 'do not fix errors or warnings',
-      '--no-fix-warnings': 'fix errors, but do not fix warnings',
-      '--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)'
+  api.registerCommand(
+    'lint',
+    {
+      description: 'lint and fix source files',
+      usage: 'vue-cli-service lint [options] [...files]',
+      options: {
+        '--format [formatter]': 'specify formatter (default: codeframe)',
+        '--no-fix': 'do not fix errors or warnings',
+        '--no-fix-warnings': 'fix errors, but do not fix warnings',
+        '--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)'
+      },
+      details:
+        'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
     },
-    details: 'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
-  }, args => {
-    require('./lint')(args, api)
-  })
+    args => {
+      require('./lint')(args, api)
+    }
+  )
 }

packages/@vue/cli-plugin-unit-jest/generator/index.js

@@ -11,32 +11,35 @@ module.exports = (api, _, __, invoking) => {
       '@vue/test-utils': '1.0.0-beta.29'
     },
     jest: {
-      'moduleFileExtensions': [
+      moduleFileExtensions: [
         'js',
         'jsx',
         'json',
         // tell Jest to handle *.vue files
         'vue'
       ],
-      'transform': {
+      transform: {
         // process *.vue files with vue-jest
         '^.+\\.vue$': 'vue-jest',
-        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
+        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+          'jest-transform-stub'
       },
       'transformIgnorePatterns': ['/node_modules/'],
       // support the same @ -> src alias mapping in source code
-      'moduleNameMapper': {
+      moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/src/$1'
       },
       // serializer for snapshots
-      'snapshotSerializers': [
-        'jest-serializer-vue'
-      ],
-      'testMatch': [
+      snapshotSerializers: ['jest-serializer-vue'],
+      testMatch: [
         '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
       ],
       // https://github.com/facebook/jest/issues/6766
-      'testURL': 'http://localhost/'
+      testURL: 'http://localhost/',
+      watchPlugins: [
+        require.resolve('jest-watch-typeahead/filename'),
+        require.resolve('jest-watch-typeahead/testname')
+      ]
     }
   })
 
@@ -60,9 +63,13 @@ module.exports = (api, _, __, invoking) => {
       // Jest's shipped babel-jest still uses babel 6,
       // so we cannot use extendPackage which renders babel.config.js.
       api.render(files => {
-        files['.babelrc'] = JSON.stringify({
-          plugins: ['transform-es2015-modules-commonjs']
-        }, null, 2)
+        files['.babelrc'] = JSON.stringify(
+          {
+            plugins: ['transform-es2015-modules-commonjs']
+          },
+          null,
+          2
+        )
       })
     }
   } else {
@@ -74,7 +81,7 @@ module.exports = (api, _, __, invoking) => {
   }
 }
 
-const applyTS = module.exports.applyTS = (api, invoking) => {
+const applyTS = (module.exports.applyTS = (api, invoking) => {
   api.extendPackage({
     jest: {
       moduleFileExtensions: ['ts', 'tsx'],
@@ -119,12 +126,12 @@ const applyTS = module.exports.applyTS = (api, invoking) => {
       }
     })
   }
-}
+})
 
-const applyESLint = module.exports.applyESLint = api => {
+const applyESLint = (module.exports.applyESLint = api => {
   api.render(files => {
     files['tests/unit/.eslintrc.js'] = api.genJSConfig({
       env: { jest: true }
     })
   })
-}
+})

packages/@vue/cli-plugin-unit-jest/package.json

@@ -29,6 +29,7 @@
     "jest": "^23.6.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
+    "jest-watch-typeahead": "^0.2.1",
     "vue-jest": "^3.0.3"
   },
   "devDependencies": {

packages/@vue/cli-service/__tests__/buildLib.spec.js

@@ -132,3 +132,45 @@ test('build as lib with webpackConfiguration depending on target (js)', async ()
   const commonContent = await project.read('dist/testLib.common.js')
   expect(commonContent).not.toContain(`foo: 'bar'`)
 })
+
+test('build as lib with --filename option', async () => {
+  const project = await create('build-lib-filename-option', defaultPreset)
+  await project.write('src/main.js', `
+      export default { foo: 1 }
+      export const bar = 2
+    `)
+  const { stdout } = await project.run('vue-cli-service build --target lib --name testLib --filename test-lib src/main.js')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/test-lib.common.js')).toBe(true)
+  expect(project.has('dist/test-lib.umd.js')).toBe(true)
+  expect(project.has('dist/test-lib.umd.min.js')).toBe(true)
+
+  const port = await portfinder.getPortPromise()
+  server = createServer({ root: path.join(project.dir, 'dist') })
+
+  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
+
+  expect(await page.evaluate(() => {
+    return window.document.title
+  })).toBe('testLib demo')
+
+  // should expose a module with default and named exports
+  expect(await page.evaluate(() => {
+    return window.testLib.default.foo
+  })).toBe(1)
+
+  expect(await page.evaluate(() => {
+    return window.testLib.bar
+  })).toBe(2)
+})

packages/@vue/cli-service/__tests__/generator.spec.js

@@ -43,5 +43,4 @@ test('dart sass', async () => {
 
   expect(files['src/App.vue']).toMatch('<style lang="scss">')
   expect(pkg).toHaveProperty(['devDependencies', 'sass'])
-  expect(pkg).toHaveProperty(['devDependencies', 'fibers'])
 })

packages/@vue/cli-service/__tests__/multiPage.spec.js

@@ -15,7 +15,7 @@ async function makeProjectMultiPage (project) {
         index: { entry: 'src/main.js' },
         foo: { entry: 'src/foo.js' },
         bar: { entry: 'src/bar.js' },
-        foobar: { entry: 'src/foobar.js' }
+        foobar: { entry: ['src/foobar.js'] }
       },
       chainWebpack: config => {
         const splitOptions = config.optimization.get('splitChunks')

packages/@vue/cli-service/generator/index.js

@@ -46,7 +46,6 @@ module.exports = (api, options) => {
         'sass-loader': '^7.1.0'
       },
       'dart-sass': {
-        fibers: '^3.1.1',
         sass: '^1.17.2',
         'sass-loader': '^7.1.0'
       },

packages/@vue/cli-service/generator/template/public/favicon.ico

@@ -1,8 +1,8 @@
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
-<script src="./<%- htmlWebpackPlugin.options.libName %>.umd.js"></script>
+<script src="./<%- htmlWebpackPlugin.options.assetsFileName %>.umd.js"></script>
 <% if (htmlWebpackPlugin.options.cssExtract) { %>
-<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.libName %>.css">
+<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.assetsFileName %>.css">
 <% } %>
 
 <script>

packages/@vue/cli-service/lib/commands/build/demo-lib-js.html

@@ -1,9 +1,9 @@
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
 <script src="https://unpkg.com/vue"></script>
-<script src="./<%- htmlWebpackPlugin.options.libName %>.umd.js"></script>
+<script src="./<%- htmlWebpackPlugin.options.assetsFileName %>.umd.js"></script>
 <% if (htmlWebpackPlugin.options.cssExtract) { %>
-<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.libName %>.css">
+<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.assetsFileName %>.css">
 <% } %>
 
 <div id="app">

packages/@vue/cli-service/lib/commands/build/demo-lib.html

@@ -31,6 +31,7 @@ module.exports = (api, options) => {
       '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
       '--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`,
       '--report': `generate report.html to help analyze bundle content`,
       '--report-json': 'generate report.json to help analyze bundle content',

packages/@vue/cli-service/lib/commands/build/index.js

@@ -1,7 +1,7 @@
 const fs = require('fs')
 const path = require('path')
 
-module.exports = (api, { entry, name, formats }, options) => {
+module.exports = (api, { entry, name, formats, filename }, options) => {
   const { log, error } = require('@vue/cli-shared-utils')
   const abort = msg => {
     log()
@@ -24,16 +24,26 @@ module.exports = (api, { entry, name, formats }, options) => {
     api.service.pkg.name ||
     path.basename(entry).replace(/\.(jsx?|vue)$/, '')
   )
-
+  filename = filename || libName
   function genConfig (format, postfix = format, genHTML) {
     const config = api.resolveChainableWebpackConfig()
 
+    const browserslist = require('browserslist')
+    const targets = browserslist(undefined, { path: fullEntryPath })
+    const supportsIE = targets.some(agent => agent.includes('ie'))
+
+    const webpack = require('webpack')
+    config.plugin('need-current-script-polyfill')
+      .use(webpack.DefinePlugin, [{
+        'process.env.NEED_CURRENTSCRIPT_POLYFILL': JSON.stringify(supportsIE)
+      }])
+
     // adjust css output name so they write to the same file
     if (config.plugins.has('extract-css')) {
       config
         .plugin('extract-css')
           .tap(args => {
-            args[0].filename = `${libName}.css`
+            args[0].filename = `${filename}.css`
             return args
           })
     }
@@ -64,12 +74,13 @@ module.exports = (api, { entry, name, formats }, options) => {
             inject: false,
             filename: 'demo.html',
             libName,
+            assetsFileName: filename,
             cssExtract: config.plugins.has('extract-css')
           }])
     }
 
     // resolve entry/output
-    const entryName = `${libName}.${postfix}`
+    const entryName = `${filename}.${postfix}`
     config.resolve
       .alias
         .set('~entry', fullEntryPath)