JS npm 包,不能在模块外使用 import 语句
Posted
技术标签:
【中文标题】JS npm 包,不能在模块外使用 import 语句【英文标题】:JS npm package, Cannot use import statement outside a module 【发布时间】: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) 它只适用于远程的script
s(即具有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
。
不过,像上面显示的导入那样执行脚本应该对您有用,并且在全局命名空间中公开库。
【讨论】:
感谢您的解释,但我还有一个愚蠢的问题是如果我使用解决方案 B,如何处理 CORS? 下载文件,放入本地 htdocs 或 www 文件夹并从那里引用。 谢谢!我明白了!【参考方案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
(或类似的地方)生成一个工作包。然后在您的网站上链接该捆绑包。
【讨论】:
谢谢,没有报错信息但是不行,还是不能使用NP法。 我试过了,对我来说效果很好。确保index.iife.js
文件与 html 文件位于同一目录中。
谢谢,我会再试一次。以上是关于JS npm 包,不能在模块外使用 import 语句的主要内容,如果未能解决你的问题,请参考以下文章
Typescript & TypeORM:不能在模块外使用 import 语句