JS npm 包，不能在模块外使用 import 语句

Question

我想使用这个 npm 包https://github.com/nefe/number-precision ，按照步骤操作但不起作用。

1. npm install number-precision --save--dep

2. import NP from 'number-precision' or require() on my JS file first-line ，错误消息如下：无法定义 require && export或无法在模块外使用 import 语句。

3. <script src="node_modules/number-precision/build/index.iife.js">import NP from 'number-precision </script>

   它不会显示任何错误消息，但在我的 js 文件中，NP 方法仍然不起作用。

4. <script src="/workout.js"></script>并把我的 js 文件第一行import NP from 'number- precision'

   我懂了：

   拒绝执行来自 ' http://0.0.0.0:2000/node_modules/number-precision/ ' 的脚本，因为其 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

   如何在我的 js 文件中正确执行这个 npm 包？

Answer 1

要在浏览器中使用导入，执行导入的文件需要

a) 包含在type="module" ：

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

b) 它仅适用于远程的script s（即具有src属性），它不适用于内联脚本。

另请注意，您不能在浏览器中从node_modules速记引用文件，这仅在与node_modules一起运行时才有效。

所以，在你的 training.js 中，像这样开始：

import 'https://github.com/nefe/number-precision/blob/master/build/index.iife.js';

不幸的是，那个库作者似乎没有提供一个真正的 ES6 模块版本（我刚刚打开了一个问题），所以你不能像页面建议的那样继续并将脚本导入变量NP 。

但是，像上面显示的导入一样执行脚本应该对您有用，并且在全局命名空间中公开库。

Answer 2

如果要使用独立的<script>标签，请查看iife.js的内容：

https://github.com/nefe/number-precision/blob/master/build/index.iife.js

var NP = (function (exports) {
'use strict';

// ...

return exports;

}({}));

它创建了一个全局NP变量，因此不需要导入，只需将其放在首位：

<script src="./index.iife.js"></script>

（如果需要，将src更改为index.iife.js的正确路径，但是您想对其进行结构化）

如果你想在 Webpack 中使用它，它对我来说很好用。 安装包后，在入口点import它：

// src/index.js
import NP from 'number-precision'
console.log(NP.round(5, 5));

然后运行 ​​Webpack 来打包代码：

npx webpack

并且将在dist/main.js （或类似的地方）中生成一个工作包。 然后在您的网站上链接该捆绑​​包。