feat: support vue.config.mjs (#6405)

Author: haoqunjiang

package.json

@@ -6,7 +6,7 @@
     "packages/vue-cli-version-marker"
   ],
   "scripts": {
-    "test": "node scripts/test.js",
+    "test": "node --experimental-vm-modules scripts/test.js",
     "pretest": "yarn clean",
     "lint": "eslint --fix packages/**/*.js packages/**/bin/*",
     "lint-without-fix": "eslint packages/**/*.js packages/**/bin/*",

packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js

@@ -4,7 +4,7 @@ const Service = require('@vue/cli-service/lib/Service')
 const create = require('@vue/cli-test-utils/createTestProject')
 const { assertServe, assertBuild } = require('./tsPlugin.helper')
 
-test('using correct loader', () => {
+test('using correct loader', async () => {
   const service = new Service('/', {
     pkg: {},
     plugins: [
@@ -13,7 +13,7 @@ test('using correct loader', () => {
     ]
   })
 
-  service.init()
+  await service.init()
   const config = service.resolveWebpackConfig()
   // eslint-disable-next-line no-shadow
   const rule = config.module.rules.find(rule => rule.test.test('foo.ts'))

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

@@ -10,13 +10,13 @@ const mockPkg = json => {
   fs.writeFileSync('/package.json', JSON.stringify(json, null, 2))
 }
 
-const createMockService = (plugins = [], init = true, mode) => {
+const createMockService = async (plugins = [], init = true, mode) => {
   const service = new Service('/', {
     plugins,
     useBuiltIn: false
   })
   if (init) {
-    service.init(mode)
+    await service.init(mode)
   }
   return service
 }
@@ -36,11 +36,11 @@ afterEach(() => {
   }
 })
 
-test('env loading', () => {
+test('env loading', async () => {
   process.env.FOO = 0
   fs.writeFileSync('/.env.local', `FOO=1\nBAR=2`)
   fs.writeFileSync('/.env', `BAR=3\nBAZ=4`)
-  createMockService()
+  await createMockService()
 
   expect(process.env.FOO).toBe('0')
   expect(process.env.BAR).toBe('2')
@@ -50,11 +50,11 @@ test('env loading', () => {
   fs.unlinkSync('/.env')
 })
 
-test('env loading for custom mode', () => {
+test('env loading for custom mode', async () => {
   process.env.VUE_CLI_TEST_TESTING_ENV = true
   fs.writeFileSync('/.env', 'FOO=1')
   fs.writeFileSync('/.env.staging', 'FOO=2\nNODE_ENV=production')
-  createMockService([], true, 'staging')
+  await createMockService([], true, 'staging')
 
   expect(process.env.FOO).toBe('2')
   expect(process.env.NODE_ENV).toBe('production')
@@ -78,85 +78,85 @@ test('loading plugins from package.json', () => {
   expect(service.plugins.some(({ id }) => id === 'bar')).toBe(false)
 })
 
-test('load project options from package.json', () => {
+test('load project options from package.json', async () => {
   mockPkg({
     vue: {
       lintOnSave: 'default'
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   expect(service.projectOptions.lintOnSave).toBe('default')
 })
 
-test('handle option publicPath and outputDir correctly', () => {
+test('handle option publicPath and outputDir correctly', async () => {
   mockPkg({
     vue: {
       publicPath: 'https://foo.com/bar',
       outputDir: '/public/'
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   expect(service.projectOptions.publicPath).toBe('https://foo.com/bar/')
   expect(service.projectOptions.outputDir).toBe('/public')
 })
 
-test('normalize publicPath when relative', () => {
+test('normalize publicPath when relative', async () => {
   mockPkg({
     vue: {
       publicPath: './foo/bar'
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   expect(service.projectOptions.publicPath).toBe('foo/bar/')
 })
 
-test('allow custom protocol in publicPath', () => {
+test('allow custom protocol in publicPath', async () => {
   mockPkg({
     vue: {
       publicPath: 'customprotocol://foo/bar'
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   expect(service.projectOptions.publicPath).toBe('customprotocol://foo/bar/')
 })
 
-test('keep publicPath when empty', () => {
+test('keep publicPath when empty', async () => {
   mockPkg({
     vue: {
       publicPath: ''
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   expect(service.projectOptions.publicPath).toBe('')
 })
 
-test('load project options from vue.config.js', () => {
+test('load project options from vue.config.js', async () => {
   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: {
       lintOnSave: 'default'
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   // vue.config.js has higher priority
   expect(service.projectOptions.lintOnSave).toBe(false)
 })
 
-test('load project options from vue.config.js as a function', () => {
+test('load project options from vue.config.js as a function', async () => {
   fs.writeFileSync(path.resolve('/', 'vue.config.js'), '')
   jest.mock(path.resolve('/', 'vue.config.js'), () => function () { return { lintOnSave: false } }, { virtual: true })
   mockPkg({
     vue: {
       lintOnSave: 'default'
     }
   })
-  const service = createMockService()
+  const service = await createMockService()
   // vue.config.js has higher priority
   expect(service.projectOptions.lintOnSave).toBe(false)
 })
 
-test('api: assertVersion', () => {
+test('api: assertVersion', async () => {
   const plugin = {
     id: 'test-assertVersion',
     apply: api => {
@@ -169,12 +169,12 @@ test('api: assertVersion', () => {
       expect(() => api.assertVersion('^100')).toThrow('Require @vue/cli-service "^100"')
     }
   }
-  createMockService([plugin], true /* init */)
+  await createMockService([plugin], true /* init */)
 })
 
-test('api: registerCommand', () => {
+test('api: registerCommand', async () => {
   let args
-  const service = createMockService([{
+  const service = await createMockService([{
     id: 'test',
     apply: api => {
       api.registerCommand('foo', _args => {
@@ -183,13 +183,13 @@ test('api: registerCommand', () => {
     }
   }])
 
-  service.run('foo', { n: 1 })
+  await service.run('foo', { n: 1 })
   expect(args).toEqual({ _: [], n: 1 })
 })
 
-test('api: --skip-plugins', () => {
+test('api: --skip-plugins', async () => {
   let untouched = true
-  const service = createMockService([{
+  const service = await createMockService([{
     id: 'test-command',
     apply: api => {
       api.registerCommand('foo', _args => {
@@ -204,11 +204,11 @@ test('api: --skip-plugins', () => {
     }
   }], false)
 
-  service.run('foo', { 'skip-plugins': 'test-plugin' })
+  await service.run('foo', { 'skip-plugins': 'test-plugin' })
   expect(untouched).toEqual(true)
 })
 
-test('api: defaultModes', () => {
+test('api: defaultModes', async () => {
   fs.writeFileSync('/.env.foo', `FOO=5\nBAR=6`)
   fs.writeFileSync('/.env.foo.local', `FOO=7\nBAZ=8`)
 
@@ -229,7 +229,7 @@ test('api: defaultModes', () => {
     foo: 'foo'
   }
 
-  createMockService([plugin1], false /* init */).run('foo')
+  await (await createMockService([plugin1], false /* init */)).run('foo')
 
   delete process.env.NODE_ENV
   delete process.env.BABEL_ENV
@@ -246,11 +246,11 @@ test('api: defaultModes', () => {
     test: 'test'
   }
 
-  createMockService([plugin2], false /* init */).run('test')
+  await (await createMockService([plugin2], false /* init */)).run('test')
 })
 
-test('api: chainWebpack', () => {
-  const service = createMockService([{
+test('api: chainWebpack', async () => {
+  const service = await createMockService([{
     id: 'test',
     apply: api => {
       api.chainWebpack(config => {
@@ -263,8 +263,8 @@ test('api: chainWebpack', () => {
   expect(config.output.path).toBe('test-dist')
 })
 
-test('api: configureWebpack', () => {
-  const service = createMockService([{
+test('api: configureWebpack', async () => {
+  const service = await createMockService([{
     id: 'test',
     apply: api => {
       api.configureWebpack(config => {
@@ -279,8 +279,8 @@ test('api: configureWebpack', () => {
   expect(config.output.path).toBe('test-dist-2')
 })
 
-test('api: configureWebpack returning object', () => {
-  const service = createMockService([{
+test('api: configureWebpack returning object', async () => {
+  const service = await createMockService([{
     id: 'test',
     apply: api => {
       api.configureWebpack(config => {
@@ -297,8 +297,8 @@ test('api: configureWebpack returning object', () => {
   expect(config.output.path).toBe('test-dist-3')
 })
 
-test('api: configureWebpack preserve ruleNames', () => {
-  const service = createMockService([
+test('api: configureWebpack preserve ruleNames', async () => {
+  const service = await createMockService([
     {
       id: 'babel',
       apply: require('@vue/cli-plugin-babel')
@@ -319,10 +319,10 @@ test('api: configureWebpack preserve ruleNames', () => {
   expect(config.module.rules[0].__ruleNames).toEqual(['js'])
 })
 
-test('internal: should correctly set VUE_CLI_ENTRY_FILES', () => {
+test('internal: should correctly set VUE_CLI_ENTRY_FILES', async () => {
   delete process.env.VUE_CLI_ENTRY_FILES
 
-  const service = createMockService([{
+  const service = await createMockService([{
     id: 'test',
     apply: api => {
       api.configureWebpack(config => {
@@ -343,9 +343,9 @@ test('internal: should correctly set VUE_CLI_ENTRY_FILES', () => {
   )
 })
 
-test('api: configureDevServer', () => {
+test('api: configureDevServer', async () => {
   const cb = () => {}
-  const service = createMockService([{
+  const service = await createMockService([{
     id: 'test',
     apply: api => {
       api.configureDevServer(cb)
@@ -354,17 +354,17 @@ test('api: configureDevServer', () => {
   expect(service.devServerConfigFns).toContain(cb)
 })
 
-test('api: resolve', () => {
-  createMockService([{
+test('api: resolve', async () => {
+  await createMockService([{
     id: 'test',
     apply: api => {
       expect(api.resolve('foo.js')).toBe(path.resolve('/', 'foo.js'))
     }
   }])
 })
 
-test('api: hasPlugin', () => {
-  createMockService([
+test('api: hasPlugin', async () => {
+  await createMockService([
     {
       id: 'vue-cli-plugin-foo',
       apply: api => {