如何在 Node.js 中使用 import / export 的三种方法

2021-01-08 16:54:08

参考地址 如何在 Node.js 中使用 import / export 的三种方法

因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10How To Enable ES6 Imports in Node.JS 仍然是老大难问题

下面我来介绍三种方法可以让我们在 Node.js 中使用 import/export 。

:第1、2种方法均是借助 babel,需要注意的是文章使用的babel版本 < 7。从 babel 7.X 版本开始,部分包名、用法发生了些许变化,大体与7之前的用法类似,详细请到官方手册学习 7.X 版本的改动(Babel 踩坑总结(三) —— 7.X 版本升级是我对 7.X 版本三大改动的总结)

1. 使用 babel-register

1.1 下载必须的包
npm install babel-register babel-preset-env -D1
1.2 修改你的 server.js

下面是一个 server.js 的例子:

const Koa = require('koa')const app = new Koa()app.listen(8225, console.log("application is start at port 8225"))1234

用 import 替换 require

import Koa from 'koa'const app = new Koa()app.listen(8225, console.log("application is start at port 8225"))1234

如果你现在用 node server.js 跑这个文件,你会收到像这样的错误提示:

/Users/zwkkkk1/myStudy/demo/chatroom/server/app.js:1
(function (exports, require, module, __filename, __dirname) { import Koa from 'koa'
                                                                     ^^^

SyntaxError: Unexpected identifier12345

下面让我们用 babel 来解决这个问题

1.3 新增一个 start.js 文件

这个文件将成为我们的入口文件,里面是一些 babel 的代码

require('babel-register') ({
    presets: [ 'env' ]})module.exports = require('./server.js')12345

注意,接下来不是 node server.js,而是用 node start.js 来启动这个文件

2. 使用 babel-node 命令

如果你不想添加新的文件也可以,这里需要在命令行中使用 babel-node 命令。babel-node 命令不是独立安装,在 Babel 7.X 版本前,需要通过安装 babel-cli 包获得;在 Babel 7.X 版本,需要安装 @babel/core@babel/cli 两个包。

此处以 7.X 之前的版本举例,7.X 版本可去官网查找对应包的使用用例

安装必要的插件

全局安装 babel-cli

npm install babel-cli -g1

安装 babel-preset-env

npm install babel-preset-env -D1

然后原来是 node server.js,改为这样调用:babel-node --presets env server.js

需要注意的是如果只是为了 babel-node 这一个命令,安装 babel-cli 会加载安装很多资源和模块,出于性能考虑不推荐在生产环境使用。自己在开发调试的时候,可以鼓捣着玩玩

3. 来自 Node.js 官方的力量

Node 9提供了一个尚处于 Experimental 阶段的模块,让我们可以抛弃 babel 等一类工具的束缚,直接在 Node 环境下使用 import/export

官方手册:ECMAScript Modules
一个不错的教程:Node 9下import/export的丝般顺滑使用
有兴趣的可以去了解一下,嫌字多的可以继续往下看看我总结的使用方法

用前须知
  • Node 版本需在 9.0 及以上

  • 不加 loader 时候,使用 import/export 的文件后缀名必须为 .mjs

举个例子,还是用上面的例子,请将代码回退到 Babel 中第一步的样子

3.1 改写 server.js
import Koa from 'koa'const app = new Koa()app.listen(8225, console.log("application is start at port 8225"))1234

和前面一样,不过将文件名改一下,从 server.js 改为 server.mjs

3.2 启动文件

执行下面代码,来启动文件

node --experimental-modules ./server.mjs1

注意这是引用 koa 第三方模块不用做其他变化,如果要 import 自己的文件,那么那个待引入的文件也要改后缀。

比如

import example from './example'1

那么原来应该是 example.js 要改为 example.mjs

目前这个模块还处于实验阶段,还是不要放到生产环境,自己拿出来玩玩还是可以的,


  • 2020-12-16 22:07:44

    Android视频点播-边播边缓存

    一些知名的视频app客户端(优酷,爱奇艺)播放视频的时候都有一些缓存进度(二级进度缓存),qq,微信有关的小视频,还有一些短视频app,都有边播边缓的处理。还有就是当文件缓存完毕了再次播放的话就不再请求网络了直接播放本地文件了。既节省了流程又提高了加载速度。 今天我们就是来研究讨论实现这个边播边缓存的框架,因为它不和任何的业务逻辑耦合。

  • 2020-12-16 22:46:44

    基于coturn项目的stun/turn服务器搭建

    webrtc是google推出的基于浏览器的实时语音-视频通讯架构。其典型的应用场景为:浏览器之间端到端(p2p)实时视频对话,但由于网络环境的复杂性(比如:路由器/交换机/防火墙等),浏览器与浏览器很多时候无法建立p2p连接,只能通过公网上的中继服务器(也就是所谓的turn服务器)中转。示例图如下:

  • 2020-12-16 23:06:05

    Rocket.Chat推送信息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket.Chat推送消息 以下示例可以转为别的语言的版本, 本示例使用Linux平台的curl测试, curl非常强大. 登陆 首先需要登陆Rocket.Chat服务器

  • 2020-12-17 09:01:23

    对BitTorrent Tracker源码分析

    tracker服务器是BT下载中必须的角色。一个BT client 在下载开始以及下载进行的过程中,要不停的与 tracker 服务器进行通信,以报告自己的信息,并获取其它下载client的信息。这种通信是通过 HTTP 协议进行的,又被称为 tracker HTTP 协议,它的过程是这样的: client 向 tracker 发一个HTTP 的GET请求,并把它自己的信息放在GET的参数中;这个请求的大致意思是:我是xxx(一个唯一的id),我想下载yyy文件,我的ip是aaa,我用的端口是bbb。。。

  • 2020-12-17 10:55:48

    html5 video p2p research

    节约带宽,减少缓冲时间,提升服务质量,处理峰值流量, 视频观看的人越多,播放越流畅。

  • 2020-12-17 10:57:34

    使用 MediaSource 搭建流式播放器

    Media Source Extensions(媒体源扩展)大大地扩展了浏览器的媒体播放功能,提供允许JavaScript 生成媒体流。这可以用于自适应流(adaptive streaming,也是我毕设的研究方向)及随时间变化的视频直播流(live streaming)等应用场景。