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

【问题标题】：JS npm package, Cannot use import statement outside a moduleJS npm 包，不能在模块外使用 import 语句
【发布时间】：2019-12-01 06:23:06
【问题描述】：

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

npm install number-precision --save--dep
import NP from 'number-precision' 或require() 在我的 JS 文件第一行，错误消息将如下所示： 无法定义 require && export 或 不能在模块外使用 import 语句。
<script src="node_modules/number-precision/build/index.iife.js">import NP from 'number-precision </script>

它不会显示任何错误消息，但在我的 js 文件中，NP 方法仍然不起作用。
<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 包？

【问题讨论】：

【解决方案1】：

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

a) 包含在type="module"：

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

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

另请注意，您不能在浏览器中简写来自 node_modules 的文件，这仅在使用 Node 运行时有效。

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

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

不幸的是，该库作者似乎没有提供真正的 ES6 模块版本 (I've just opened an issue on that)，因此您无法像页面建议的那样继续操作并将脚本导入变量 NP。

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

【讨论】：

【解决方案2】：

如果要使用独立的<script>标签，请查看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（或类似的地方）生成一个工作包。然后在您的网站上链接该捆绑包。

【讨论】：