我可以在vanilla网页中使用npm packges吗?

kgsdhlau  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(90)

我有一个简单的网页由香草html,css和js文件。
我希望能够在我的js文件中使用import { moment } from "moment"语法,但当我将npm添加到我的项目中时,安装moment wiht npm install并使用该语法,当我使用live-server运行我的应用程序时,我得到一个错误:
Uncaught TypeError: Failed to resolve module specifier "moment". Relative references must start with either "/", "./", or "../".

sbtkgmzw

sbtkgmzw1#

是的,这是可能的。浏览器支持原生ES6模块超过6年。这里是一个Express的示例配置,但它应该适用于所有严肃的Web服务器。
index.html

<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
    {
      "imports": {
        "moment": "/moment"
      }
    }
  </script>

  <script type="module" src="/app.js"></script>
</head>
<body>
  <h1>Moment</h1>
  <div></div>
</body>
</html>

字符串
app.js

import moment from 'moment';
let x = new moment();
document.querySelector('div').textContent = x;


index.js

import express from 'express';
const app = express();
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.get('/app.js', (req, res) => {
  res.set('Content-Type', 'application/javascript');
  res.sendFile(__dirname + '/app.js');
});

app.get('/moment', (req, res) => {
  res.set('Content-Type', 'application/javascript');
  res.sendFile(__dirname + '/node_modules/moment/dist/moment.js');
});

app.listen(8080, () => {
  console.log('Server running...');
});


package.json

{
  "name": "example",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "moment": "^2.29.4"
  },
  "type": "module",
  "devDependencies": {
    "@types/express": "^4.17.21"
  }
}


我使用了一个导入Map来允许import moment from 'moment';没有相对路径,你必须配置你的web服务器来指向Moment JavaScript代码。
如果Web服务器不支持重写(就像我在Moment中使用的那样),您必须在导入Map中使用完整路径。
在这里,您可以找到更多关于原生ES6模块的信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

相关问题