How to refactor complex configs?

TIP

When you use Vuepress for a long time, Configs get more dirty.
Hundreds of lines will make you confused...
It's really hard to read, to recognize, and also hard to change configs. This page tells you how to manage your configuration with multi files.

After refactor your Config, your config.js may similar to this.

const themeLocales = require('./config/themeLocales')
const locales = require('./config/locales')
const head = require('./config/inHeadTag')

module.exports = {
  locales: locales,
  head: head,
  themeConfig: {
    logo: 'https://vuejs.org/images/logo.png',
    locales: themeLocales,
  },
}

1
2
3
4
5
6
7
8
9
10
11
12

Just Follow Along

In .vuepress folder, make config folder.

In config.js file, you need to decide which part would be refactored. (In this page, I gonna use locales.)

module.exports = {
  locales: {
    '/': {
      lang: 'ko-KR',
      title: 'ruzun devlog',
      description: 'Vue 문서',
    },
    '/en/': {
      lang: 'en-US',
      title: 'ruzun devlog',
      description: 'Vue-powered Static Site Generator',
    }
  }
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

In config Folder, make locales.js file.

Open locales.js file, and move codes you selected.

module.exports = {
  // anything you want to configure
  '/': {
    lang: 'ko-KR',
    title: 'ruzun devlog',
    description: 'Vue 문서',
  },
  '/en/': {
    lang: 'en-US',
    title: 'ruzun devlog',
    description: 'Vue-powered Static Site Generator',
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

Go back to config.js file, and modify your code like this.

const locales = require('./config/locales')

module.exports = {
  locales: locales
  ...
}

1
2
3
4
5
6

Failed Logs

Conceptually, it is very simple to refactor configs.
Just refactor configs like normal code lines
But, you should remind these two.

each separated file config shoule return with module.exports
At first, I made my configs with function, and tried with export default.
But I failed with this exception...
```
Unexpected token 'export'
```
1
I googled, and found the reason. In vuepress, it seems not properly work with es6. (If wrong, let me know.)
You should you require, not import.
if you use import, you may see this exception.
```
SyntaxError: Cannot use import statement outside a module
```
1
It might be same issue (ES5 / ES6)

Hope this helps you. thanks

#vuepress #vue #vuepress-config #vuepress-refactoring

# How to refactor complex configs?

# Just Follow Along

# Failed Logs

How to refactor complex configs?

Just Follow Along

Failed Logs