Alias/helpers for extending config files

[Akryum]

Proposal for enhancing Generator API with additional convenience methods. Edited by @yyx990803 to incorporate #846 & #892.

Extending entry file

// Generator
api.extendScript('./src/main', file => {
  // Import a file
  file.injectImport('{ apolloProvider }', './vue-apollo')
  // Direct import
  file.injectImport('./style.css')
  // Add an option to the instance
  file.injectRootOptions({
    provide: 'apolloProvider.provide()',
  })
})

As suggested in #892 this can be done by translating the API into extra data passed to EJS when rendering the entry template:

import Vue from 'vue'
import App from './App.vue'
<%_ if (options.router) { _%>
import router from './router'
<%_ } _%>
<%_ if (options.vuex) { _%>
import store from './store'
<%_ } _%>
<%_ for(const _import of injectedImports) { _%>
import <%= _import.bindings %> from '<%= _import.from %>'
<%_ } _%>

Vue.config.productionTip = false

new Vue({
  <%_ if (options.router) { _%>
  router,
  <%_ } _%>
  <%_ if (options.vuex) { _%>
  store,
  <%_ } _%>
  <%_ for(const option of injectedRootOptions) { _%>
  <%= option %>,
  <%_ } _%>
  render: h => h(App)
}).$mount('#app')

Extending .gitignore

// Generator
api.extendGitignore([
  '/live/',
])

Extending tsconfig.json

// Generator
api.extendTsConfig(...)

Aliases for Extending Other Config Files

These could be just aliases on top of extendPackage

// Generator
api.extendVueConfig(...)
api.extendBabelConfig(...)
api.extendPostCSSConfig(...)
api.extendESLintConfig(...)
api.extendJestConfig(...)
api.extendBrowsersList(...)

[LinusBorg]

@Akryum @yyx990803

Is this proposal already done? I see that we have api.injectImports() and api.InjectRootOptions() for example

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/generator/router/index.js#L2-L3

• If this is done, we should document these options in the cli docs -> Plugin Dev Guide.
• If this it not done, what's missing?

[Akryum]

I think we could have extendIgnoreFile and addToEnv as well.