# VuePress のテーマのソースコードを吐き出す

デフォルトのテーマをいじっていい感じにしたい。

参考:Default Theme Config | VuePress

vuepress eject で、デフォルトのテーマのソースコードを吐き出せる。

vuepress eject srcsrc 以下に吐き出す。

実際にやってみた。

# できなかった

vuepress eject src と打てばできるだろう。

$ vuepress eject src
(node:90682) UnhandledPromiseRejectionWarning: TypeError: cli.command(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).action is not a function
    at module.exports (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/registerCoreCommands.js:26:6)
    at beforeParse (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:16:5)
    at CLI (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/util.js:22:24)
    at Object.<anonymous> (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:12:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
(node:90682) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not
 handled with .catch(). (rejection id: 3)
(node:90682) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

できない・・

vuepress コマンド自体で同じエラーが出た。

$ vuepress
(node:95290) UnhandledPromiseRejectionWarning: TypeError: cli.command(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).action is not a function
    at module.exports (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/registerCoreCommands.js:26:6)
    at beforeParse (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:16:5)
    at CLI (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/util.js:22:24)
    at Object.<anonymous> (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:12:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
(node:95290) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:95290) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

これは、そもそもこうだったのかよくわからない。(今もこのままです。)

グローバルにインストールしていないので、動かないのは当然だった。。

// package.json

{
  ...
  "devDependencies": {
    ...
    "vuepress": "^1.0.0-alpha.32"
  }
}

# できた

以下の方法にやり方を変えて、とりあえずデフォルトのテーマのソースコードを吐き出せました。

# package.json

package.json に、vuepress eject src を追加。

npm run dev で、vuepress dev src が動いているから動くだろうと思った。

// package.json

{
...
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src",
    "eject": "vuepress eject src"
  },
...
}

# npm run

$ npm run
Scripts available in hene via `npm run-script`:
  dev
    vuepress dev src
  build
    vuepress build src
  eject
    vuepress eject src

# vurepress eject src

実際に実行してみる。

$ npm run eject

> hene@1.0.0 eject /Users/xxxxx/hene
> vuepress eject src

success Copied default theme into /Users/xxxxx/hene/src/.vuepress/theme.

src の中に吐き出せた!

# 吐き出したソースコード

$ % pwd
/Users/xxxxx/hene/src/.vuepress/theme
$ tree
.
├── LICENSE
├── components
│   ├── AlgoliaSearchBox.vue
│   ├── DropdownLink.vue
│   ├── DropdownTransition.vue
│   ├── Home.vue
│   ├── NavLink.vue
│   ├── NavLinks.vue
│   ├── Navbar.vue
│   ├── Page.vue
│   ├── Sidebar.vue
│   ├── SidebarButton.vue
│   ├── SidebarGroup.vue
│   └── SidebarLink.vue
├── global-components
│   └── Badge.vue
├── index.js
├── layouts
│   ├── 404.vue
│   └── Layout.vue
├── noopModule.js
├── styles
│   ├── arrow.styl
│   ├── code.styl
│   ├── custom-blocks.styl
│   ├── mobile.styl
│   ├── theme.styl
│   ├── toc.styl
│   └── wrapper.styl
└── util
    └── index.js

5 directories, 26 files

ついでに src/.vuepress/styles/palette.styl から src/.vuepress/theme/styles/palette.styl に移しておいた。

// src/.vuepress/theme/styles/palette.styl

// colors
$accentColor = #FF6E00
$textColor = #2C3E50
$borderColor = #EAECEF
$codeBgColor = #282C34
$arrowBgColor = #FBFBF0

# 参考