feat: auto-resolve alias support (closes #4)

Author: IndexXuan

.npmignore

@@ -2,3 +2,5 @@
 yarn-error.log
 logo.png
 .github
+/temp
+.prettierignore

.prettierignore

@@ -0,0 +1 @@
+/temp

config/index.ts

@@ -5,6 +5,9 @@ import envCompatible from 'vite-plugin-env-compatible'
 import vueCli, { VueCliOptions } from 'vite-plugin-vue-cli'
 import mpa from 'vite-plugin-mpa'
 import { Options } from './options'
+import Config from 'webpack-chain'
+import merge from 'webpack-merge'
+import { name } from '../package.json'
 
 // vue.config.js
 let vueConfig: VueCliOptions = {}
@@ -14,36 +17,42 @@ try {
   /**/
 }
 
-// vueConfig
-// @see https://cli.vuejs.org/config/#baseurl
-//{
-//  publicPath: '/',
-//  outputDir: 'build',
-//  productionSourceMap: false,
-//  css: {
-//    sourceMap: false,
-//  },
-//  configureWebpack: Object | Function
-//  chainWebpack: Function
-//  devServer: {
-//    port: Number
-//    host: String
-//    proxy: Object,
-//    before: Function
-//  },
-//  pluginOptions: {
-//    vite: {
-//      alias: Record<string, string>,
-//      plugins: Plugin[],
-//      vitePluginVue2Options: { jsx: true }
-//  },
-//},
-
 const pluginOptions = vueConfig.pluginOptions || {}
 const viteOptions: Options = pluginOptions.vite || {}
-const alias = viteOptions.alias || {}
 const extraPlugins = viteOptions.plugins || []
 
+if (viteOptions.alias) {
+  console.log(
+    `[${name}]: pluginOptions.vite.alias is deprecated, will auto resolved from chainWebpack / configureWebpack`,
+  )
+}
+
+const chainableConfig = new Config()
+vueConfig.chainWebpack(chainableConfig)
+// @see temp/webpack*.js & temp/vue.config.js
+const aliasOfChainWebpack = chainableConfig.resolve.alias.entries()
+const aliasOfConfigureWebpackObjectMode =
+  (vueConfig.configureWebpack &&
+    vueConfig.configureWebpack.resolve &&
+    vueConfig.configureWebpack.resolve.alias) ||
+  {}
+const aliasOfConfigureWebpackFunctionMode = (() => {
+  if (typeof vueConfig.configureWebpack === 'function') {
+    let originConfig = chainableConfig.toConfig()
+    const res = vueConfig.configureWebpack(originConfig)
+    originConfig = merge(originConfig, res)
+    if (res) {
+      return res.resolve.alias || {}
+    }
+    return originConfig.resolve.alias || {}
+  }
+})()
+const alias = {
+  ...aliasOfConfigureWebpackObjectMode,
+  ...aliasOfConfigureWebpackFunctionMode,
+  ...aliasOfChainWebpack,
+}
+
 const useMPA = Boolean(vueConfig.pages)
 
 const plugins = [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-vite",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "out-of-box vite dev for vue-cli project",
   "main": "index.js",
   "author": "[email protected]",
@@ -23,18 +23,21 @@
   ],
   "dependencies": {
     "vite": "2.0.1",
-    "vite-plugin-vue2": "1.2.1",
     "vite-plugin-env-compatible": "0.0.3",
+    "vite-plugin-mpa": "0.1.0",
     "vite-plugin-vue-cli": "0.2.0",
-    "vite-plugin-mpa": "0.1.0"
+    "vite-plugin-vue2": "1.2.1"
   },
   "devDependencies": {
     "@commitlint/cli": "7.2.0",
     "@commitlint/config-conventional": "7.1.2",
     "@types/node": "14.14.25",
+    "@types/webpack-merge": "^4.1.5",
     "commitizen": "2.10.1",
     "cz-customizable": "5.2.0",
     "lint-staged": "10.5.4",
+    "webpack-chain": "^6.3.1",
+    "webpack-merge": "^4.2.2",
     "yorkie": "2.0.0"
   },
   "prettier": {

temp/vue.config.js

@@ -0,0 +1,92 @@
+const path = require('path')
+const appConfig = require('./src/app.config')
+
+const resolve = (p) => path.resolve(__dirname, p)
+
+/** @type import('@vue/cli-service').ProjectOptions */
+module.exports = {
+  // mode-1
+  // configureWebpack: {
+  //   resolve: {
+  //     alias: {
+  //       '@@': resolve('.'),
+  //     },
+  //   }
+  // },
+  // mode-2
+  // configureWebpack: config => {
+  //   config.resolve.alias = {
+  //     '@@@': resolve('.'),
+  //   }
+  // },
+  // // mode-3
+  // configureWebpack: config => {
+  //   config.resolve.alias = {
+  //     '@@@@': resolve('.'),
+  //   }
+  //   return config
+  // },
+  // mode-4
+  // configureWebpack: () => {
+  //   return {
+  //     resolve: {
+  //       alias: {
+  //         '@@@@@': resolve('.'),
+  //       }
+  //     }
+  //   }
+  // },
+  // https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
+  chainWebpack(config) {
+    // We provide the app's title in Webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    config.set('name', appConfig.title)
+
+    // Set up all the aliases we use in our app.
+    config.resolve.alias.clear().merge(require('./aliases.config').webpack)
+
+    // Don't allow importing .vue files without the extension, as
+    // it's necessary for some Vetur autocompletions.
+    config.resolve.extensions.delete('.vue')
+
+    // Only enable performance hints for production builds,
+    // outside of tests.
+    config.performance.hints(
+      process.env.NODE_ENV === 'production' &&
+        !process.env.VUE_APP_TEST &&
+        'warning'
+    )
+  },
+  css: {
+    // Enable CSS source maps.
+    sourceMap: true,
+  },
+  // Configure Webpack's dev server.
+  // https://cli.vuejs.org/guide/cli-service.html
+  devServer: {
+    ...(process.env.API_BASE_URL
+      ? // Proxy API endpoints to the production base URL.
+        { proxy: { '/api': { target: process.env.API_BASE_URL } } }
+      : // Proxy API endpoints a local mock API.
+        { before: require('./tests/mock-api') }),
+  },
+  pluginOptions: {
+    vite: {
+      // alias: {
+      //   '@': resolve('.'),
+      //   '@src': resolve('src'),
+      //   '@router': resolve('src/router'),
+      //   '@views': resolve('src/router/views'),
+      //   '@layouts': resolve('src/router/layouts'),
+      //   '@components': resolve('src/components'),
+      //   '@assets': resolve('src/assets'),
+      //   '@utils': resolve('src/utils'),
+      //   '@state': resolve('src/state'),
+      //   '@design': resolve('src/design/index.scss'),
+      // },
+      vitePluginVue2Options: {
+        jsx: true,
+      },
+    },
+  },
+}