在浏览器运行环境中如何引入npm下载的包？

Question

现在是这么写的直接运行main.html会提示错误
Uncaught ReferenceError: require is not defineat main.js:1
`var THREE = require('three');
var scene = new THREE.Scene();`
现在想在main.html中直接跑起来,在浏览器运行环境中如何引入npm下载的包？

包在node_modules里

Answer 1

浏览器并不能使用 require 关键字，在现在这个时间点上还有绝大多数浏览器都不支持 type="module" 的 import：

常见的 require / import 都需要配合 webpack / rollup / parcel 这种打包工具，打包工具会把引入的包根据设置转换成浏览器可理解执行的形式，例如 iife、jsonp、全局变量

建议先去学 webpack 怎么用

Answer 2

首先require()函数是Node环境的，浏览器端不支持。

这里有几种可选的解决方案：

1. 大部分浏览器上使用的js都支持cdn引入方式，你可以使用这个方式自己的脚本在前面引入需要的资源。
2. 或者，使用webpack之类的打包工具。
3. 再或者，你没接触过webpack，可以使用browserify，可以更快上手。

Answer 3

浏览器下不能用require require是node中引用的方式. 浏览器你得用 import

Answer 4

你可能需要的是webpack。

Answer 5

使用第三方NPM包，不使用构建工具。

那不如直接将包下载下来，script引入，或者直接找cdn。