草庐IT

node支持ES module (import) 的三种方式

不看人世烟火 2023-07-12 原文

文章目录

前言

作为前端开发者，在日常开发中，常常会使用 import 语法引入模块。但是在大多人前端开发者印象中， Node 默认是不支持 import 和 export 的，更多是使用require 和 module.exports 、 exports.xxx 来进行文件导入导出。

注意：

本次实验过程中，运行 test.js （入口文件）文件并不是直接使用 node test.js，而是使用自定义命令 use-import-in-node.

具体如下：

  1. 目录结构
  2. 在 package.json 中添加 bin属性
  3. 在 test.js 第一行添加 #!/usr/bin/env node （参考文章）
  4. 运行 npm link
  5. 就可以全局使用 use-import-in-node 命令了，和直接使用 npm 一样。直接运行 use-import-in-node 就等同于 node test.js（参考文章）

    关于自定义命令为什么可以直接执行，不理解的可以看我的另一篇文章，从操作系统命令的使用层次来理解脚手架(vue-cli)命令(vue)
    如果不想使用这种方式，全程使用node（babel-node）执行 test.js文件也可

一、通过 babel-node

1. 安装 babel-node

babel-node 命令并非独立安装，在 Babel 7.0 以前，通过安装 babel-cli 包获得。而在 Babel 7.0 以后，babel 的模块被被拆分，需要安装 @babel/core @babel/node 两个包来获取。

  • babel 7.x 以前的写法
 npm i -g babel-cli
  • babel 7.x 以后的写法
 npm i -g @babel/core @babel/node

2. 安装 presets 并配置 .babelrc 文件

npm i @babel/preset-env -g


提示：由于我babel有关的包都是全局安装的，所以.babelrc所在目录下没有package.json 文件

3. 文件结构和代码

4. 修改test.js执行环境


从图中可以看到，运行 use-import-in-node 和 babel-node test.js 效果一样

二、使用webpack

1. 安装webpack相关包

npm i webpack  webpack-cli -g

2. 配置webpack

（1）配置打包命令

我们最终需要的是打包后的代码。

（2）配置webpack.config.js

  1. package.json 同级目录下新建 webpack.config.js 文件

  2. 具体配置很简单，如下图
    提示：target默认值是 web ， 如果你要用import导入node内置库，比如path、fs等，需要设置为node

  3. 运行 npm run build 生成打包文件

    注意在哪里执行的打包命令

3. 修改test.js执行环境并执行


从图中可以看到，运行 use-import-in-node 和 node test.js 效果一样
注意：这里require的文件是打包后的文件/dist

三、node原生支持

其实 node 原生也是支持 es module ，就是 import 和 export 来导入导出的。其中有几个需要注意的点：

  • 所有的文件名后缀需要改成.mjs
  • 导入文件路径的时候需要输入完整的文件名，不能省略.mjs。（省略.mjs后缀名后默认导入js文件，这是会报找不到文件的错误）
  • 所有的导入导出都必须用ES module规范，使用 ComonJs会报错
  • 有些东西，例如__dirname 、 __filename无法使用（这是在调用require的时候注入的）

但是在node版本v12.0.0 之前，是不支持直接用node执行.mjs 文件的，需要加上·--experimental-modules 选项，因为这时还是一个实验性的功能，所以还会爆出提示信息；在node版本v12.0.0 之后，可以直接用node执行.mjs 文件。（具体见下方截图）

1. demo代码

2. 运行 test.mjs文件

（1）node版本大于等于v12.0.0

（2）node版本小于v12.0.0

附上源码链接

github的master分支

moduleimportcodexfflijavascriptnode.js前端

有关node支持ES module (import) 的三种方式的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  4. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  5. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  6. ruby - 如何更优雅地记下这三种情况？ - 2

    是否可以让这段代码更紧凑？我在这里错过了什么吗？ifvaluemax_ratemax_rateelsevalueend 最佳答案 这里有一些完全不同的东西:[min_rate,value,max_rate].sort[1] 关于ruby-如何更优雅地记下这三种情况？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/13309740/

  7. ruby - 如何以编程方式删除实例上的 "singleton information"以使其编码(marshal)？ - 2

    我创建了一个由于“在运行时执行的单例元类定义”而无法编码的对象(这段代码的描述是否正确？)。这是通过以下代码执行的:#defineclassXthatmyusesingletonclassmetaprogrammingfeatures#throughcallofmethod:break_marshalling!classXdefbreak_marshalling!meta_class=class我该怎么做才能使对象编码正确？是否可以从对象instance_of_x的classX中“移除”单例组件？我真的需要一个建议，因为我们的一些对象需要通过Marshal.dump序列化机制进行缓存。

  8. ruby - Paperclip:以编程方式分配图像并设置其名称 - 2

    使用Paperclip，我想从这样的URL抓取图像:require'open-uri'user.photo=open(url)问题是我最后得到一个像“open-uri20110915-4852-1o7k5uw”这样的文件名。有什么方法可以更改user.photo上的文件名？作为一个额外的变化，Paperclip将我的文件存储在S3上，所以如果我可以在初始分配中设置我想要的文件名就更好了，这样图像就会上传到正确的S3key。像这样:user.photo=open(url),:filename=>URI.parse(url).path 最佳答案

  9. ruby - Ruby 和 Ruby on Rails 中的三层架构 - 2

    我是一名决定学习Ruby和RubyonRails的ASP.NETMVC开发人员。我已经有所了解并在RoR上创建了一个网站。在ASP.NETMVC上开发，我一直使用三层架构:数据层、业务层和UI(或表示)层。尝试在RubyonRails应用程序中使用这种方法，我发现没有关于它的信息(或者也许我只是找不到它？)。也许有人可以建议我如何在RubyonRails上创建或使用三层架构？附言我使用ruby​​1.9.3和RubyonRails3.2.3。 最佳答案 我建议在制作RoR应用程序时遵循RubyonRails(RoR)风格。Rails

  10. ruby - 如何以编程方式检查证书是否已被吊销？ - 2

    我正在开发一个xcode自动构建系统。在执行一些预构建验证时，我想检查指定的证书文件是否已被撤销。我了解securityverify-cert验证其他证书属性但不验证吊销。我如何检查撤销？我正在用Ruby编写构建系统，但我对任何语言的想法都持开放态度。我阅读了这个答案(Openssl-Howtocheckifacertificateisrevokedornot)，但指向底部的链接(DoesOpenSSLautomaticallyhandleCRLs(CertificateRevocationLists)now?)进入的Material对我的目的来说有点过于复杂(用户上传已撤销的证书是一

随机推荐