VuePressに外部のスクリプトを追加するメモ


VuePressにScriptタグを追加したい場合の記述のメモ。VuePressのバージョンは1.0.0-alpha.47です。

## Head内へのScript追加

* config.jsに追加する

config.jsにこんな書き方があるんですねぇ。

```config.js
 head: [
        ['script',{}, `
            console.log('hello');
        `],
        ['script', { src: 'https://code.jquery.com/jquery-3.4.0.min.js' }]
 ]
```

こんな感じでhead内に任意のスクリプトを書いたり、外部のスクリプトを読み込めます。

```html
<html>
	<head>
		<script>
			console.log('hello');
		</script>
	    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
	</head>
	<body>
	  
	</body>
</html>
```

ちなみにこんな感じでtype属性を書くと

```js
['script',{type: 'text/javascript'}, `
	console.log('hello');
`]
```

生成されるhtmlにもtype属性が付きますが、

```html
<script type="text/javascript">
	console.log('hello');
</script>
```

html5くらいからその辺の指定はいらないって話になってるのでこの書き方は冗長なので`{type: 'text/javascript'}`は`{}`としています。

## `</body>`の直前に追加1

headよりも`</body>`直前にいれたいケースです。

```Layout.vue
<template>
  <div>
    <main>
     <p>こんにちは</p>
    </main>

    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
  </div>
</template>
```

Layout.vueなどのテンプレートファイルは`<template>`タグの子要素は一個しか置けない模様なのでdivで囲った中にscriptタグを追加しています。

生成されるhtmlはこんな感じ。

```html
<html>
<head></head>
<body>
    <div id="app" data-server-rendered="true">
    	<div data-v-1473a8b9>
    		<main>
     			<p>こんにちは</p>
    		</main>
    		<script src="https://code.jquery.com/jquery-3.4.0.min.js" data-v-1473a8b9></script>
    	</div>
    <div class="global-ui"></div></div>
    
    <script src="/assets/js/app.90b476a1.js" defer></script>
    <script src="/assets/js/2.64b02ba7.js" defer></script>
    <script src="/assets/js/4.c1449ba0.js" defer></script>
  </body>
</html>
```

## `</body>`の直前に追加2 - ビルドに組み込む

↑の書き出されたhtmlの最後の部分が内部で利用しているjsファイルを圧縮して読み込んでる箇所っぽいです。

```
    <script src="/assets/js/app.90b476a1.js" defer></script>
    <script src="/assets/js/2.64b02ba7.js" defer></script>
    <script src="/assets/js/4.c1449ba0.js" defer></script>
```

別途読み込むよりはここに入れ込みたいなぁと思ったりしました。
調べたところで出てきた、

* [VuePressにTweetを埋め込む](https://blog.ebiiim.com/computer/2256/)
* [VuePressはコーダーの夢を見るか。](https://qiita.com/gollowars/items/845baa30ceb7cc035919)

を参考に[vue-script2](https://github.com/taoeffect/vue-script2)を採用してみました。

```bash
$ yarn add -D vue-script2
```

`.vuepress/enhanceApp.js`を作成して、vue-script2を有効にします。

[公式](https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements)にもありますが、拡張したい際はここをいじるらしい。

```.vuepress/enhanceApp.js
import VS2 from 'vue-script2'
 
export default ({
    Vue
}) => {
    Vue.use(VS2)
}
```

これで`script2`タグが使えます。

```Layout.vue
<template>
  <div>
    <main>
     <p>こんにちは</p>
    </main>

    <script2 src="https://code.jquery.com/jquery-3.4.0.min.js"></script2>
  </div>
</template>
```

script2で書いてあげるとビルドに組み込まれてスッキリした形になりました。

```html
<html>
<head></head>
<body>
    <div id="app" data-server-rendered="true">
    	<div data-v-1473a8b9>
    		<main>
     			<p>こんにちは</p>
    		</main>
    	</div>
    <div class="global-ui"></div></div>
    
    <script src="/assets/js/app.90b476a1.js" defer></script>
    <script src="/assets/js/2.64b02ba7.js" defer></script>
    <script src="/assets/js/4.c1449ba0.js" defer></script>
  </body>
</html>
```

これでちゃんとjQueryも使えます。

## 雑感

[external script support ](https://github.com/vuejs/vuepress/issues/774)ででてる提案っぽい書き方対応してくれるといいなぁ。