webpack让node.js支持import/export写法

女爷i 2023-06-05 08:14 181阅读 0赞

import { EventEmitter } from 'events';
    //const EventEmitter = require('events');
    
    class MyEmitter extends EventEmitter {
        
    }
    
    const myEmitter = new MyEmitter();
    
    myEmitter.on('event', () => {
        console.log('触发事件，执行函数2');
    });
    
    myEmitter.on('event', () => {
        console.log('触发事件，执行函数1');
    });
    
    myEmitter.on('event', () => {
        console.log('触发事件，执行函数3');
    });
    
    myEmitter.emit('event');

今天运行上面这个“事件触发器”的例子时报错了，原因是我把导入方式改为了ES6的写法。

在[之前的文章][Link 1]中提到过，node.js不支持ES6导入/导出模块的写法。安装es-checker可以查看node.js对ES6的支持，执行下面的命令：

npm install -g es-checker

然后，执行：

es-checker

会发现确实不支持：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70][]

而大型项目一般会使用webpack打包，webpack中文文档中提到：

> webpack 2支持原生的ES6模块语法，意味着你可以无须额外引入babel这样的工具，就可以使用import和export。

然后，我全局安装了webpack和webpack命令行。

npm install -g webpack
    
    npm install webpack-cli -g

使用webpack：

webpack --mode=development main.js -o bundle.js

然后，修改launch.json为：

{
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "Launch Program",
                "program": "${workspaceFolder}\\bundle.js"
            }
        ]
    }

就可以调试和运行了。

[Link 1]: https://blog.csdn.net/liminwang0311/article/details/89703056
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70]: /images/20230601/aee026e1e7364bd890ec23ccc4a55c8b.png