Q&A
前提・実現したいこと
WebDAV-clientを利用してWebDAV経由でNextCloudからファイルを扱えるWebアプリケーションを書こうとしています。
README.mdの "Usage in the Browser"に沿って、以下のようなディレクトリ構成でファイルを作成しました。
- index.html
- index.js
その後、ターミナルで
Shell
1npm install webdav --save // WebDAV-clientをインストール 2php -S localhost:8080 // ローカルサーバを立ち上げ
を実行しました。
index.htmlのソースコードは
html
1<!doctype html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <title>test</title> 8 <script src="./index.js" type="module"></script> 9</head> 10 11<body> 12 test 13</body> 14 15</html>
index.jsのソースコードは
javascript
1import { createClient } from "webdav/web"; 2 3const client = createClient( 4 "http://localhost:8088/remote.php/dav/files/nextcloud-test", 5 "nextcloud-test", 6 "testtest" 7); 8 9client 10 .getDirectoryContents("/testdir") 11 .catch(error => { 12 console.log('Error: ', error); 13 }) 14 .then(function (contents) { 15 console.log(JSON.stringify(contents, undefined, 4)); 16 });
となっています。
Dockerでlocalhost:8088にNextCloudを立ち上げています。
発生している問題・エラーメッセージ
ここで、ブラウザでローカルサーバを開くと、
plain
1Uncaught TypeError: モジュール指定 “webdav/web” の解決時にエラーが発生しました。 2モジュール指定の相対パスは “./” または “../”, “/” のいずれかで始まらなければなりません。
とエラーメッセージが出ます。
試したこと
Node.jsでのUsageに沿って
javascript
1const createClient = require("webdav");
のようにしましたが、requireはbrowserifyなどを利用しない限り使えないようなので意味がありませんでした。
補足情報（FW/ツールのバージョンなど）
バージョン
- ブラウザ：Firefox 80.0
- PHP（ローカルサーバ立ち上げ）：7.3.11
- WebDAV-client：3.3.0
- node：v12.14.0
- npm：6.13.4
ご回答いただければ幸いです。よろしくお願いいたします。
回答1件
0
ベストアンサー
いまのところ、npm経由のモジュール参照は、ブラウザの<script type="module">では解決できません。
WebpackやRollupといったツールを使って、npmから来るライブラリを取り込んだJavaScriptを作成する必要があります。
requireはbrowserifyなどを利用しない限り使えないようなので意味がありませんでした。
残念ながら、そういったツールを使うより他に方法はありません。
投稿2020/08/17 22:29
総合スコア145184
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/17 22:32