客户端导入NPM脚本失败：多种尝试方法均无效

完全可以在客户端导入这类简单的NPM脚本，以下是针对你问题的具体解决思路和方法：

先理清你之前失败的核心原因 #

• require is not defined：浏览器本身没有Node.js的CommonJS模块环境，原生不支持require语法
• Cannot use import statement outside of a module：仅在package.json设置type: module不够，还需要给HTML中的脚本标签声明type="module"，否则浏览器会按普通脚本解析
• Browserify等工具没生效，大概率是没正确完成打包流程（比如未指定入口文件生成浏览器可识别的bundle）

实用解决方案 #

方案1：原生ES模块直接导入（无需打包工具） #

1. 修改HTML中的脚本引用，添加type="module"属性：

<script type="module" src="./main.js"></script>

2. 在main.js中使用完整路径导入NPM包（需确认包的入口文件，通常是index.js）：

import helloworld from './node_modules/@xxxxx/hello-world/index.js';
console.log(helloworld('Alice')); // 输出Hello Alice

如果觉得写完整路径麻烦，还可以用Import Maps简化导入路径，在HTML中添加：

<script type="importmap">
  {
    "imports": {
      "@xxxxx/hello-world": "./node_modules/@xxxxx/hello-world/index.js"
    }
  }
</script>

之后就能直接用import helloworld from '@xxxxx/hello-world';导入。

方案2：用轻量打包工具（推荐Vite） #

这是最省心的方式，能自动处理模块导入：

1. 初始化项目后安装Vite：

npm install vite --save-dev

2. 在package.json中添加启动脚本：

{
  "scripts": {
    "dev": "vite"
  }
}

3. 在main.js中直接导入包：

import helloworld from '@xxxxx/hello-world';
helloworld('Bob');

4. 运行npm run dev，通过Vite提供的本地服务访问页面，模块就能正常加载。

方案3：直接引入UMD/IIFE格式的包文件 #

如果你的NPM包提供了UMD或IIFE格式的编译文件（通常在dist目录下），可以直接用普通脚本标签引入：

<script src="./node_modules/@xxxxx/hello-world/dist/hello-world.umd.js"></script>
<script>
  console.log(helloworld('Charlie')); // 直接调用全局变量
</script>

补充：你的文件结构显示项目根目录包含node_modules、main.js、package.json，@xxxxx/hello-world包内有入口文件和自身的package.json，以上方案都适配这个结构。

内容的提问来源于stack exchange，提问作者Robert Carmichael