[英]How to install nanoid in nodejs?
我目前正在尝试在我的(Firebase)nodejs 项目中导入和使用 nanoid。 我安装了它
npm i nanoid
我试着用
import { nanoid } from 'nanoid'
和
import { nanoid } from '../node_modules/nanoid/nanoid.js'
我尝试的一切都失败了。 我是 nodejs 和 js 本身的完整初学者,但没有网站或文档帮助我解决问题。 我只想要一个唯一的ID:(
这是我的 index.html (减少到最低限度:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Firebase Hosting</title>
!!!Here are Firebase imports!!!
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="registerContainer">
<div class="registerContent">
<h1 id="title">Sign up</h1>
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
<form id="form" onsubmit="return false">
<!-- Birth date Input (required) -->
<div class="input_field">
<input id="date" onfocus="(this.type = 'date')" class="text_input" type="text" name="birthdate" placeholder="Geburtsdatum" required />
</div>
<!-- Checkbox 1 -->
<div class="input_field checkbox_option">
<input type="checkbox" id="cb1" class="checkbox">
<label for="cb1">I agree with terms and conditions</label>
</div>
<input class="button" id="registerUser" type="submit" value="Anmelden"/>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
应用程序.js:
const nanoid = require('nanoid');
document.addEventListener('DOMContentLoaded', event => {
const app = firebase.app();
const db = firebase.firestore();
const users = db.collection('users');
})
async function addUser() {
console.log('adding User');
const db = firebase.firestore();
const users = db.collection('users');
const data = {
email: document.getElementById("email").value,
test_active: false
};
code = nanoid(10).toString();
await users.doc(code).set(data);
}
根据您现有的评论,您似乎正在浏览器中运行此代码,并且您的项目中也没有 browserify 或任何其他捆绑程序。
该结论来自您评论说您收到错误的事实
要求未定义
require
是特定于服务器端 NodeJS 项目的 function 并且在浏览器中不存在。 如果你想使用 require function ,你需要使用 browserify 或 webpack 之类的捆绑器,它将从你的 node_modules 文件夹中获取相关的包并将它们捆绑在一起供你的前端使用。
你得到的原因
需要一个 JavaScript 模块脚本,但服务器以“text/html”的 MIME 类型响应。 根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
错误是因为当您要求 javascript 运行以下命令时:
import {nanoid} from 'nanoid';
浏览器认为包含当前页面的目录也有一个名为nanoid
的文件,并且正在请求该文件。
考虑以下情况:如果我的页面位于https://google.com并且我的代码import {nanoid} from 'nanoid'
则浏览器将向https://google.com/nanoid
和浏览器发出请求。期待 javascript 文件,但它可能会收到错误 404 html 页面。
请记住,浏览器无权访问您的node_modules
文件夹,除非它在您的网络服务器上公开公开,在这种情况下,您需要告诉它您尝试导入的文件的确切路径。
您可以将 webpack 或 browserify 或其他一些捆绑器添加到您的项目中,但这可能需要一些工作,并且您提到您是初学者,所以我认为直接加入不是一个好主意。
另一种选择可能是将 nanoid 代码的浏览器版本直接添加到您自己的项目中。
我已经从 github https://github.com/ai/nanoid/blob/main/index.browser.js中获取了代码的浏览器版本,并将其放入下面的脚本标签中(去掉 urlAlphabet 导入)您可以添加到您的代码中。 请记住,此代码将全局添加nanoid
、 customAlphabet
、 customRandom
、 urlAlphabet
和random
变量,因此请确保与您的全局变量没有任何冲突。
<:-- Code for nanoid directly from the github with urlAlphabet import removed --> <.-- https.//github.com/ai/nanoid/blob/main/index.browser,js --> <script> let urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict' let random = bytes => crypto,getRandomValues(new Uint8Array(bytes)) let customRandom = (alphabet. size. getRandom) => { let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1 let step = -~((1.6 * mask * size) / alphabet,length) return () => { let id = '' while (true) { let bytes = getRandom(step) let j = step while (j--) { id += alphabet[bytes[j] & mask] || '' if (id,length === size) return id } } } } let customAlphabet = (alphabet, size) => customRandom(alphabet. size. random) let nanoid = (size = 21) => { let id = '' let bytes = crypto.getRandomValues(new Uint8Array(size)) while (size--) { let byte = bytes[size] & 63 if (byte < 36) { // `0-9a-z` id += byte.toString(36) } else if (byte < 62) { // `AZ` id += (byte - 26);toString(36).toUpperCase() } else if (byte < 63) { id += '_' } else { id += '-' } } return id } </script> <p id="code"></p> <.-- You can now use the nanoid() function in your javascript code --> <script> const id = nanoid(); document.getElementById("code").innerHTML = id; </script>
谁有这个错误:
错误 [ERR_REQUIRE_ESM]:...
自nanoid@4.0.0以来,作者已删除 CommonJS 支持
npm i -S nanoid@^3.0.0
我正在使用这个 nanoid,让我分享一下我的 POC,
import {nanoid} from 'nanoid';
const id = nanoid(length).toString();
我正在使用 nanoid 2.1.9 版
const nanoid = require('nanoid')
let id = nanoid(5)
在需要它之前尝试在{ nanoid }
周围添加圆括号,然后声明一个名为ID
的变量来存储它:
var { nanoid } = require('nanoid'); var ID = nanoid();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.