OJET项目用RequireJS加载Node格式第三方JS报util模块未加载如何解决

你使用的这款JSONTreeView是为Node.js环境编写的CommonJS规范模块，依赖Node原生内置的util、events模块。而你的OJET项目使用的RequireJS是AMD规范的浏览器端模块加载器，浏览器环境没有内置这些Node原生模块，也不默认支持CommonJS的require、module.exports语法，因此加载时会抛出找不到util模块的错误。

• 第一步：准备Node原生模块的浏览器兼容版本
  下载util、events对应的浏览器端适配垫片（polyfill）文件，放入项目的静态资源目录。
• 第二步：配置RequireJS的路径映射和垫片规则
  在项目的RequireJS配置文件（通常为main.js或包含requirejs.config的文件）中添加如下配置，原有其他配置保留即可：

requirejs.config({
  paths: {
    // 路径替换为你实际存放对应js文件的路径
    'util': 'libs/util-polyfill',
    'events': 'libs/events-polyfill',
    'json-tree-view': 'libs/你的JSONTreeView文件名'
  },
  shim: {
    'json-tree-view': {
      deps: ['util', 'events'],
      exports: 'JSONTreeView'
    }
  }
});

• 第三步：适配JSONTreeView的模块语法
  修改JSONTreeView文件，将原有CommonJS代码包裹为AMD兼容格式，修改后完整代码如下：

define(function(require, exports, module) {
  'use strict';

  var util = require('util'),
      EE = require('events').EventEmitter;

  module.exports = JSONTreeView;
  util.inherits(JSONTreeView, EE);

  function JSONTreeView(name_, value_, parent_, isRoot_){
    var self = this;

    if (typeof isRoot_ === 'undefined' && arguments.length < 4) {
        isRoot_ = true;
    }

    EE.call(self);

    if(arguments.length < 2){
        value_ = name_;
        name_ = undefined;
    } 
  }
});

• 第四步：按AMD规范调用组件
  不要直接在HTML中用script标签加载该文件，通过RequireJS的异步加载方式调用即可：

require(['json-tree-view'], function(JSONTreeView) {
  // 此处编写业务逻辑，正常使用JSONTreeView即可
  const formatTree = new JSONTreeView('demo', {key1: 'value1', key2: 'value2'});
});

如果你不想做适配改造，也可以直接更换为已经适配浏览器端的JSON格式化第三方库，可直接避免兼容问题。

内容的提问来源于stack exchange，提问作者divya