npmでインストールした非同期遷移プラグインをvscodeで使用したい。

npmを介してインストールしたbarba.jsというプラグインを
Visual Studio codeで適用しようと致しましたところ、インストール
には成功しているはずなのですが、何故だか機能致しませんでした。
原因がわかる方がいらっしゃいましたらご助言ください。

HTML5
1コード <!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>Document</title>
9  <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12<div data-barba="wrapper">
13  <div data-barba="container" data-barba-namespace="home">
14    <h1>トップページ</h1>
15    <a href="/sample.html">サンプルページへ</a>
16  </div>
17</div>
18<div class="mask"></div>
19
20  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
21  <script src="js/script.js"></script>
22</body>
23
24</html>
25
26<!DOCTYPE html>
27<html lang="ja">
28
29<head>
30  <meta charset="UTF-8">
31  <meta name="viewport" content="width=device-width, initial-scale=1.0">
32  <meta http-equiv="X-UA-Compatible" content="ie=edge">
33  <title>Document</title>
34  <link rel="stylesheet" href="css/style.css">
35</head>
36<body>
37<div data-barba="wrapper">
38  <div data-barba="container" data-barba-namespace="sample-page">
39    <h1>サンプルページ</h1>
40    <a href="/index.html">トップページへ</a>
41  </div>
42</div>
43
44
45  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
46  <script src="js/script.js"></script>
47</body>
48
49</html>

CSS3
1コード .mask {
2    position: fixed;
3    top: 0;
4    left: 0;
5    display: block;
6    width: 100%;
7    height: 100%;
8    background-color: #333;
9    z-index: 10;
10    transform: rotateY(90deg);
11    transform-origin: right;
12    visibility: hidden;
13    pointer-events: none;
14    transition-property: transform, visibility;
15    transition-duration: .5s;
16    transition-timing-function: ease;
17  
18    &.is-close {
19      transform: rotateY(0deg);
20      transform-origin: left;
21      visibility: visible;
22      pointer-events: auto;
23    }
24  }

jquery
1コード import barba from '@barba/core';
2import barbaCss from '@barba/css';
3barba.use(barbaCss);
4let mask = document.querySelector(".mask");
5barba.init({
6	transitions: [{
7		async leave() {
8			mask.classList.add('is-close');
9			await new Promise((resolve) => {
10				return setTimeout(resolve, 1000);
11			});
12		},
13		afterEnter() {
14			mask.classList.remove('is-close');
15		}
16	}]
17});

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは、npmでインストールしたものはwebpackなどのモジュールバンドラを使わなければならないと思います。以下が参考になると思います。
webpack 4 入門

CDNが用意されているようなのでそっちのほうが簡単かと思われます。

HTML
1<script src="https://unpkg.com/@barba/core"></script>

投稿2020/06/04 11:37

fake_shibe

総合スコア806

dream

2020/06/05 00:36

こんにちは。早速その方法で試してみます。

dream

2020/06/05 01:12

質問なのですが、記載されたパスをコピペするだけで良いですか？

fake_shibe

2020/06/05 05:11

コピペして、headタグのなかに入れてやってください。 barbacssもあります。 <script src="https://unpkg.com/@barba/core"></script> <script src="https://unpkg.com/@barba/css"></script>

dream

2020/06/05 07:12

教えられた通り実行してみましたらうまくいきました。ありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

npmでインストールした非同期遷移プラグインをvscodeで使用したい。

関連した質問