How to load Javascript with imported modules?
Question
I am trying to import modules from tensorflowjs, and below is my code. test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script type="module" src="./test.js"></script>
</body>
</html>
test.js
import * as tf from "./node_modules/@tensorflow/tfjs";
import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter";
const MODEL_URL = './model.json';
const model = await loadGraphModel(MODEL_URL);
const cat = document.getElementById('cat');
model.execute(tf.browser.fromPixels(cat));
Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
2 answers
solution1
0 2022-03-06 21:17:51
You can use the following python script to serve your files:
serve.py
import http.server
import socketserver
import sys
PORT = 8000
if len(sys.argv) > 1:
PORT = int(sys.argv[1])
class HttpRequestHandler(http.server.SimpleHTTPRequestHandler):
extensions_map = {
# '': 'application/octet-stream',
'': 'text/html',
'.manifest': 'text/cache-manifest',
'.html': 'text/html',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.svg': 'image/svg+xml',
'.css': 'text/css',
'.js':'application/x-javascript',
'.wasm': 'application/wasm',
'.json': 'application/json',
'.xml': 'application/xml',
}
httpd = socketserver.TCPServer(("localhost", PORT), HttpRequestHandler)
try:
print(f"serving at http://localhost:{PORT}")
httpd.serve_forever()
except KeyboardInterrupt:
pass
then:
python./serve.py 8000
By default, http.server does not take care of mime types. The above scripts indicate which mime type to use in the response header depending on the extension of the file.
solution2
0 2022-03-06 21:22:08
If you use Node.js, you can use the http-server package to serve your files.
Install
npm install --global http-server
Use
http-server
Or alternatively, use: npx http-server
See the documentation for more details and options
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.