文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在nodejs中安装纳米棒？

问如何在nodejs中安装纳米棒？
EN

Stack Overflow用户

提问于 2022-01-26 15:07:41

回答 5查看 5.9K关注 0票数 0

我目前正在尝试导入和使用我的(Firebase) nodejs项目中的纳米线。我安装它时

npm i nanoid

我试着用

import { nanoid } from 'nanoid'

和

import { nanoid } from '../node_modules/nanoid/nanoid.js'

我尝试过的一切都失败了。我是一个完全初学者与nodejs和js本身，但没有网站或文档帮助我解决问题。我只想要一个独特的身份：

这是我的index.html (降到最低)：

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Firebase Hosting</title>

    !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>

app.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);  
}

npm

nanoid

javascript

node.js

回答 5

Stack Overflow用户

回答已采纳

发布于 2022-01-26 17:34:17

根据您现有的注释，您似乎正在浏览器中运行此代码，而且您的项目中也没有浏览器或任何其他绑定程序。

这个结论来自于你评论说你得到了错误。

要求未定义

require是一个特定于服务器端NodeJS项目的函数，在浏览器中不存在。如果您想使用require函数，您需要使用像browserify或webpack这样的绑定器，它将从您的node_modules文件夹中获取相关的包，并将它们捆绑在一起供您的前端使用。

你为什么要得到

预期会有一个JavaScript模块脚本，但服务器响应时会使用MIME类型的"text/html“。根据HTML规范，对模块脚本实施严格的MIME类型检查。

错误是因为当您要求javascript运行以下代码时：

import {nanoid} from 'nanoid';

浏览器认为，包含当前页面的目录也有一个名为nanoid的文件，并且正在为该文件发出请求。

考虑以下情况:如果我的页面位于https://google.com，而我的代码说是import {nanoid} from 'nanoid'，浏览器将向https://google.com/nanoid发出请求，浏览器期待一个javascript文件，但它很可能收到一个错误的404html页面。

记住，浏览器不能访问您的node_modules文件夹，除非它是在‘re服务器上公开的，在这种情况下，您需要告诉它要导入的文件的确切路径。

你能做什么？

你可以在你的项目中添加webpack、browserify或其他绑定程序，但这可能需要一些工作，而且您提到您是个初学者，所以我不认为跳进去是个好主意。

另一个选项可能是将纳米代码的浏览器版本直接添加到您自己的项目中。

我从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) {
      // `A-Z`
      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>

票数 3

Stack Overflow用户

发布于 2022-07-09 09:29:57

谁有这个错误：

错误ERR_REQUIRE_ESM：..。

自CommonJS以来，作者已经删除了纳米管@4.0.0支持

尝试使用ESM模块导入
或使用纳米@3.0.0：npm i -S nanoid@^3.0.0

票数 2

Stack Overflow用户

发布于 2022-01-26 15:25:23

我用这个纳米棒，让我分享我的POC，

import {nanoid} from 'nanoid';
const id = nanoid(length).toString();

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70865639

复制

相似问题

问如何在nodejs中安装纳米棒？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nodejs中安装纳米棒？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nodejs中安装纳米棒？
EN