feat: support config in dedicated files

Author: yyx990803

packages/@vue/cli-test-utils/assertPromptModule.js

@@ -18,9 +18,13 @@ module.exports = async function assertPromptModule (
       }
     )
     expectedPrompts.push(
+      {
+        message: 'Where do you prefer placing config',
+        choose: 1 // package.json
+      },
       {
         message: 'package manager',
-        choose: 0
+        choose: 0 // yarn
       },
       {
         message: 'Save the preferences',
@@ -35,6 +39,7 @@ module.exports = async function assertPromptModule (
 
   if (opts.plguinsOnly) {
     delete options.packageManager
+    delete options.useConfigFiles
   }
   expect(options).toEqual(expectedOptions)
 }

packages/@vue/cli/__tests__/Creator.spec.js

@@ -67,6 +67,11 @@ test('manual + PromptModuleAPI', async () => {
       choices: ['barChoice'],
       choose: 0
     },
+    {
+      message: 'Where do you prefer placing config',
+      choices: ['dedicated', 'package.json'],
+      choose: 0
+    },
     {
       message: 'package manager',
       choices: ['Yarn', 'NPM'],
@@ -80,6 +85,7 @@ test('manual + PromptModuleAPI', async () => {
 
   const expectedOptions = {
     packageManager: 'yarn',
+    useConfigFiles: true,
     plugins: {
       bar: {},
       barChoice: {}

packages/@vue/cli/__tests__/Generator.spec.js

@@ -292,7 +292,7 @@ test('api: onCreateComplete', () => {
         api.onCreateComplete(fn)
       }
     }
-  ], cbs)
+  ], false, cbs)
   expect(cbs).toContain(fn)
 })
 
@@ -306,3 +306,45 @@ test('api: resolve', () => {
     }
   ])
 })
+
+test('extract config files', async () => {
+  const configs = {
+    vue: {
+      lintOnSave: true
+    },
+    babel: {
+      presets: ['@vue/app']
+    },
+    postcss: {
+      autoprefixer: {}
+    },
+    eslintConfig: {
+      extends: ['plugin:vue/essential']
+    },
+    jest: {
+      foo: 'bar'
+    },
+    browserslist: [
+      '>=ie9'
+    ]
+  }
+
+  const generator = new Generator('/', {}, [
+    {
+      id: 'test',
+      apply: api => {
+        api.extendPackage(configs)
+      }
+    }
+  ], true)
+
+  await generator.generate()
+
+  const json = v => JSON.stringify(v, null, 2)
+  expect(fs.readFileSync('/vue.config.js', 'utf-8')).toMatch('module.exports = {\n  lintOnSave: true\n}')
+  expect(fs.readFileSync('/.babelrc', 'utf-8')).toMatch(json(configs.babel))
+  expect(fs.readFileSync('/.postcssrc', 'utf-8')).toMatch(json(configs.postcss))
+  expect(fs.readFileSync('/.eslintrc', 'utf-8')).toMatch(json(configs.eslintConfig))
+  expect(fs.readFileSync('/.browserslistrc', 'utf-8')).toMatch(configs.browserslist.join('\n'))
+  expect(fs.readFileSync('/jest.config.js', 'utf-8')).toMatch(`module.exports = {\n  foo: 'bar'\n}`)
+})

packages/@vue/cli/lib/Creator.js

@@ -138,6 +138,7 @@ module.exports = class Creator {
       context,
       pkg,
       plugins,
+      options.useConfigFiles,
       createCompleteCbs
     )
     await generator.generate()
@@ -193,6 +194,7 @@ module.exports = class Creator {
       // manual
       options = {
         packageManager: answers.packageManager || loadOptions().packageManager,
+        useConfigFiles: answers.useConfigFiles === 'files',
         plugins: {}
       }
       // run cb registered by prompt modules to finalize the options
@@ -267,6 +269,24 @@ module.exports = class Creator {
   resolveOutroPrompts () {
     const outroPrompts = []
     const savedOptions = loadOptions()
+    if (savedOptions.useConfigFiles == null) {
+      outroPrompts.push({
+        name: 'useConfigFiles',
+        when: isMode('manual'),
+        type: 'list',
+        message: 'Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?',
+        choices: [
+          {
+            name: 'In dedicated config files',
+            value: 'files'
+          },
+          {
+            name: 'In package.json',
+            value: 'pkg'
+          }
+        ]
+      })
+    }
     if (hasYarn && !savedOptions.packageManager) {
       outroPrompts.push({
         name: 'packageManager',

packages/@vue/cli/lib/Generator.js

@@ -1,12 +1,13 @@
 const ejs = require('ejs')
 const slash = require('slash')
 const debug = require('debug')
+const configMap = require('./util/configMap')
 const GeneratorAPI = require('./GeneratorAPI')
 const sortObject = require('./util/sortObject')
 const writeFileTree = require('./util/writeFileTree')
 
 module.exports = class Generator {
-  constructor (context, pkg, plugins, completeCbs = []) {
+  constructor (context, pkg, plugins, extractConfigFiles, completeCbs = []) {
     this.context = context
     this.plugins = plugins
     this.pkg = pkg
@@ -26,6 +27,11 @@ module.exports = class Generator {
       const api = new GeneratorAPI(id, this, options, rootOptions || {})
       apply(api, options, rootOptions)
     })
+    // if the user has chosen so, extract configs from package.json into
+    // dedicated files.
+    if (extractConfigFiles) {
+      this.extractConfigFiles()
+    }
   }
 
   async generate () {
@@ -38,6 +44,17 @@ module.exports = class Generator {
     await writeFileTree(this.context, this.files)
   }
 
+  extractConfigFiles () {
+    for (const key in this.pkg) {
+      if (configMap[key]) {
+        const value = this.pkg[key]
+        const { transform, filename } = configMap[key]
+        this.files[filename] = transform(value)
+        delete this.pkg[key]
+      }
+    }
+  }
+
   sortPkg () {
     // ensure package.json keys has readable order
     this.pkg.dependencies = sortObject(this.pkg.dependencies)

packages/@vue/cli/lib/invoke.js

@@ -19,6 +19,7 @@ async function invoke (pluginName, options) {
   delete options._
   const context = process.cwd()
   const pkgPath = path.resolve(context, 'package.json')
+  const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
 
   if (!fs.existsSync(pkgPath)) {
     error(`package.json not found in ${chalk.yellow(context)}`)
@@ -60,14 +61,14 @@ async function invoke (pluginName, options) {
     context,
     pkg,
     [plugin],
+    isTestOrDebug ? false : loadOptions().useConfigFiles,
     createCompleteCbs
   )
 
   log()
   logWithSpinner('🚀', `Invoking generator for ${id}...`)
   await generator.generate()
 
-  const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
   const newDeps = generator.pkg.dependencies
   const newDevDeps = generator.pkg.devDependencies
   const depsChanged = (

packages/@vue/cli/lib/options.js

@@ -19,6 +19,7 @@ const schema = createSchema(joi => joi.object().keys({
   cssPreprocessor: joi.string().only(['sass', 'less', 'stylus']),
   useTaobaoRegistry: joi.boolean(),
   packageManager: joi.string().only(['yarn', 'npm']),
+  useConfigFiles: joi.boolean(),
   plugins: joi.object().required()
 }))
 
@@ -28,6 +29,7 @@ exports.defaults = {
   router: false,
   vuex: false,
   cssPreprocessor: undefined,
+  useConfigFiles: undefined,
   useTaobaoRegistry: undefined,
   packageManager: hasYarn ? 'yarn' : 'npm',
   plugins: {

packages/@vue/cli/lib/util/configMap.js

@@ -0,0 +1,34 @@
+const stringifyJS = require('javascript-stringify')
+const json = value => JSON.stringify(value, null, 2)
+const js = value => `module.exports = ${stringifyJS(value, null, 2)}`
+
+module.exports = {
+  vue: {
+    filename: 'vue.config.js',
+    transform: js
+  },
+  babel: {
+    filename: '.babelrc',
+    transform: json
+  },
+  postcss: {
+    filename: '.postcssrc',
+    transform: json
+  },
+  eslintConfig: {
+    filename: '.eslintrc',
+    transform: json
+  },
+  jest: {
+    filename: 'jest.config.js',
+    transform: js
+  },
+  browserslist: {
+    filename: '.browserslistrc',
+    transform: value => value.join('\n')
+  }
+  // 'lint-staged': {
+  //   filename: '.lintstagedrc',
+  //   transform: json
+  // }
+}

packages/@vue/cli/package.json

@@ -37,6 +37,7 @@
     "import-global": "^0.1.0",
     "inquirer": "^4.0.1",
     "isbinaryfile": "^3.0.2",
+    "javascript-stringify": "^1.6.0",
     "klaw-sync": "^3.0.2",
     "lodash.clonedeep": "^4.5.0",
     "minimist": "^1.2.0",

yarn.lock

@@ -6857,9 +6857,9 @@ mocha-webpack@^1.0.1:
     toposort "^1.0.0"
     yargs "^4.8.0"
 
-mocha@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-5.0.0.tgz#cccac988b0bc5477119cba0e43de7af6d6ad8f4e"
+mocha@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-4.1.0.tgz#7d86cfbcf35cb829e2754c32e17355ec05338794"
   dependencies:
     browser-stdout "1.3.0"
     commander "2.11.0"