本文介绍了如何使用Express在本地搭建一个简单的HTTP服务器，以解决HTML文件中通过import引用JS模块在浏览器中直接打开时出现的错误。通过创建一个HTTP服务，使得静态资源可以通过HTTP方式访问，从而避免了直接通过file协议访问导致的问题。作者提供了具体的代码示例，包括一个简单的Express应用和测试用例，帮助读者快速理解并实现这一解决方案。
在一个 html 文件中，如果想使用 import 的方式引入 js ：
<body>
<h2>pipeline demo</h2>
<script type="module">
import {popManager} from './usePipeline.js';
popManager.run();
</script>
</body>
在浏览器中直接打开这个 html 文件（file:///Users/wangsuyan/Desktop/easytask/examples/public/pipeline.html），你会发现在浏览器中报错：
想解决这个问题，业界也有一些方案。今天我给大家推介一个我最近摸索出的一个比较轻量、简单的方案：
在我的开源项目 sy-task （花了几个周末，新开源一个库）中，就使用了这种方案，方便我测试在浏览器中是否能够正常工作。实现的代码比较简单：
const express = require('express');
const path = require('path');
const fs = require('fs');
const port = process.env.PORT || 8888;
const app = express();
const distDir = __dirname.replace('examples', 'dist');
// enable public html can access
app.use('/', express.static(path.join(__dirname, 'public')));
// enable dist file can access
app.use('/', express.static(distDir));
const logAccess = () => {
fs.readdirSync(path.join(__dirname, 'public')).forEach(filename => {
if (filename.endsWith('.html')) {
// eslint-disable-next-line no-console
console.log(`Open in browser http://localhost:${port}/${filename}`);
}
});
};
// start http server
app.listen(port, () => {
logAccess();
});
代码的核心有两点：
1、通过 express（express 为 node 常用的 web 框架）开启一个 http 服务，相当于本地开启 HTTP server，这样可以通过 http 的方式来访问内容；
2、使用 express 的插件 static 把要访问的资源文件交给 http server，这样这些资源文件可以通过 http 的方式进行访问。
上面的代码有一些业务逻辑的考虑，其实如果写一个简单的 demo，几行代码即可搞定，我们来试一试。
创新一个文件夹，并按照下面的命令操作一下：
mkdir webserver
cd webserver
npm init -y
然后安装一下 express（在使用 express 时需要安装 node）。
npm install express -S
我创建了一些文件：
app.js 用来开启一个 http 服务，并把 suyan 文件夹的内容可以通过 http 访问：
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8686;
const app = express();
// 把文件夹 suyan 的内容交给 express.static
app.use('/', express.static(path.join(__dirname, 'suyan')));
// start http server
app.listen(port, () => {
console.log(`Open in browser http://localhost:${port}/index.html}`);
});
suyan/index.html， html 页面，通过 import 的方式引用了 add.js ：
<!DOCTYPE html>
<html lang="en">
<head>
<title>和素燕一起学前端</title>
</head>
<body>
<h1 id="sum"></h1>
<script type="module">
import add from './add.js';
let sumDom = document.getElementById('sum');
sumDom.innerText = add(3, 5);
</script>
</body>
</html>
suyan/add.js，一个实现了 add 的函数：
export default function add(a, b) {
return a + b;
}
执行 node app.js 启动 http server，然后在浏览器中输入：
http://localhost:8686/index.html
发现页面可以正常访问：
当然你也可以直接访问：
http://localhost:8686/add.js
到此，一个简单的 http 服务就完成了。如果你在实现过程中遇到问题，或者想要我写的 demo，可以私信我。
大家加油！
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网：https://lefex.gitee.io/
扫一扫
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
