javascript - JS npm包，无法在模块外使用import语句(JS npm package, Cannot use import statement outside a module)

Question

I wanted to use this npm package https://github.com/nefe/number-precision , follow the steps but not working.

(我想使用此npm包https://github.com/nefe/number-precision ，请按照以下步骤操作，但不起作用。)

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

   (npm install number-precision --save--dep)

2. import NP from 'number-precision' or require() on my JS file first-line , the error message will like this : Cannot define require && export or Cannot use import statement outside a module.

   (import NP from 'number-precision'我的JS文件第一行上的import NP from 'number-precision'或require() import NP from 'number-precision' ，错误消息将如下所示： 无法定义require && export或无法在模块外部使用import语句。)

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

   It won't show any error message but in my js file, NP method still doesn't work.

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

4. <script src="/workout.js"></script> and put on my js file first-line import NP from 'number- precision'

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

   I got this:

   (我懂了：)

   refused to execute script from ' http://0.0.0.0:2000/node_modules/number- precision/' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

   (拒绝从' http://0.0.0.0:2000/node_modules/number- precision /'执行脚本，因为它的MIME类型（'text / html'）无法执行，并且启用了严格的MIME类型检查。)

   How do I correctly execute this npm package in my js file?

   (如何在我的js文件中正确执行此npm包？)

  ask by Jhuang Chen translate from so

Answer 1

To use imports in the browser, the file that does the imports needs to

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

a) be included with type="module" :

(a）包含在type="module" ：)

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

b) it only works for script s that are remote (that is, have a src attribute), it does not work for inline scripts.

(b）它仅适用于远程script （即具有src属性的脚本），不适用于嵌入式脚本。)

Also note that you cannot shorthand reference files from node_modules in the browser, that only works when run with Node.

(还要注意，您不能从浏览器的node_modules速记引用文件，仅当与Node一起运行时才起作用。)

So, inside your workout.js, start like this:

(因此，在您的execution.js中，开始如下：)

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

Unfortunately, that library author does not seem to supply a true ES6 module version ( I've just opened an issue on that ), so you cannot proceed like the page suggests and import the script into a variable NP .

(不幸的是，该库作者似乎没有提供真正的ES6模块版本（ 我刚刚打开了一个问题 ），因此您无法像页面上所建议的那样继续进行并将脚本导入到变量NP 。)

Executing the script like the import shown above should work for you, though, and expose the library in the global namespace.

(不过，执行上述显示的导入之类的脚本应该可以为您工作，并在全局名称空间中公开该库。)