【问题标题】：How to install nanoid in nodejs?如何在 nodejs 中安装 nanoid？
【发布时间】：2022-02-10 20:43:35
【问题描述】：

我目前正尝试在我的 (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>

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

【问题讨论】：

你得到什么错误？
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.
将type="module" 添加到您的脚本标签中。检查它是否有效？
我已经添加了。如果没有type="module，错误消息是：Cannot use import statement outside a module
您使用的是什么版本的 Node.js？你的package.json 文件是什么样的？

标签： javascript node.js npm nanoid

【解决方案1】：

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

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

require 未定义

require 是特定于服务器端 NodeJS 项目的函数，在浏览器中不存在。如果你想使用 require 函数，你需要使用像 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) {
      // `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>

【讨论】：

亲爱的阿比尔，你是一个真正的英雄。感谢您花时间帮助我找到解决方案。我真的很高兴现在可以使用，并感谢您提供的所有提示。莱纳斯

【解决方案2】：

我正在使用这个 nanoid，请分享我的 POC，

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

【讨论】：

我仍然有导入错误。 Cannot use import statement outside a module
这意味着你不应该像下面这样导入， const nanoid = require('nanoid').nanoid; const id = nanoid(8).toString() // 将生成 8 个字符

【解决方案3】：

在要求它之前尝试在 { nanoid } 周围添加圆括号，然后声明一个名为 ID 的变量来存储它：

var { nanoid } = require('nanoid');

var ID = nanoid();

【讨论】：

什么都没改变
我刚刚更新了我的答案

【解决方案4】：

我使用的是 nanoid 2.1.9 版

const nanoid = require('nanoid')
let id = nanoid(5)

【讨论】：

尝试删除你的 package.json 中的 type="module"
我的 package.json 中没有 type="module"