モジュールの実行の仕方について

https://github.com/ChrisCavs/t-writer.js
上記のモジュールを試してみたいのですが
基本的な事が、分からないため困っています。

以下のような配置をしてみました。
study/
├ node_modules/
│　└ t-writer.js/
├ index.html
├ index.js
└ package.json

Node
1// index.jsです。
2'use strict';
3
4// import Typewriter from 't-writer.js'
5const Typewriter = require("t-writer.js");
6
7
8const target = document.querySelector('.tw')
9
10const options = {
11  loop: true
12};
13
14const writer = new Typewriter(target, options);
15
16writer
17  .type('A simple syntax makes it easy.')
18  .rest(500)
19  .start();

html
1<!-- index.htmlです。 -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7</head>
8<body>
9
10    <div class="tw"></div>
11    
12</body>
13</html>

お聞きしたいこと
１．どのような構成にして実行すればよいのでしょうか？
２．動くようになってからの話なのですが、
これを単なるWebサーバーに置いて動かすことは出来るのでしょうか？

分からないことありすぎて、どこをどう質問してよいのか
トンチンカンなことを聞いているかもしれませんが
よろしくお願い致します。

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

回答2件

ベストアンサー

npm install t-writer.js --save

上記でインストールしたらのであれば。
以下にjsがインストールされます。

node_modules\t-writer.js\dist\t-writer.js

import Typewriter from 't-writer.js'

公式ではimportを使ってimportする記載となっていますが、
importは対応していないブラウザが存在するので、やめてscriptタグで読み込んでください。
（importについて詳しく知りたい場合は、別途検索してください）

<script type="text/javascript" src=“node_modules/t-writer.js/dist/t-writer.js"></script>

const Typewriter = require("t-writer.js");

scriptタグで読み込むとwindow['t-writer']に展開してくれます
なので、上記を以下のように変更すればよいです。

const Typewriter = window['t-writer']

index.jsもクライアントで使うのでhtmlのscriptタグで読み込んでください。

<script type="text/javascript" src=“index.js"></script>

t-writer.jsの読み込みとあわせると以下のようになります。

<script type="text/javascript" src=“node_modules/t-writer.js/dist/t-writer.js"></script> <script type="text/javascript" src=“index.js"></script>

node_modues/t-writer.js/dist/t-writer.js
index.js
index.html

最後にこの３つをwebサーバーにあげれば実行できます。

サーバーにあげるの面倒なので
http-serverでローカルに簡易webサーバーを立てるのが早いです

https://www.npmjs.com/package/http-server

使うのはこれ

npm install http-server -save-dev

まずインストール

npx http-server

で起動

http://localhost:8080

ブラウザでアクセス

投稿2018/10/28 07:26

編集2018/10/28 09:22

退会済みユーザー

総合スコア0

TrueOgre2

2018/10/28 12:54

詳しい説明、どうもありがとうございました。うまく実行することができました。ひとつ質問なのですが >scriptタグで読み込むとwindow['t-writer']に展開してくれます t-writerという名前で展開するのは、どのようにして分かるのでしょうか？教えて頂けるとありがたいです。

退会済みユーザー

2018/10/28 13:13 編集

t-writer.jsのソースを見て判断です。慣れていると、ソースを見るとUMD(Universal Module Definition)という書き方で書かれているのが直ぐわかります。で、4行目の『global['t-writer']』という部分から判断できます。モジュールの書き方は、UMD、AMDとかCommonJSとか色々あるので、余裕がある時に調べてみてください。 JSはソースがの見れる訳ですからソースを見るのが一番早いです。

TrueOgre2

2018/10/29 13:03

返信どうもありがとうございました。はじめて聞くキーワードも出てきて、まだまだ勉強しないと思いました。

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