尝试使用 BabyParse 时获取“(SystemJS) require is not defined”

Question

我正在尝试在我的 Angular 2 应用程序中使用 BabyParse 和 SystemJS。

我完成了 npm install --save @types/babyparse 和 npm install --save babyparse，我的 systemjs.config.js 文件如下所示：

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'moment': 'npm:moment/moment.js',
      'keycloak-js': 'npm:keycloak-js/dist/keycloak.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap',
      'lodash': 'npm:lodash/lodash.js',
      'babyparse': 'npm:babyparse/babyparse.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {main: './main.js', defaultExtension: 'js'},
      rxjs: {defaultExtension: 'js'},
      'angular-in-memory-web-api': {main: './index.js', defaultExtension: 'js'},
      'ng2-bootstrap': {main: 'index.js', defaultExtension: 'js'},
    }
  });
})(this);

在我的组件文件中，我使用 import * as Baby from 'babyparse'; 导入了 BabyParse，但是当我尝试运行应用程序时，我在控制台中收到以下错误消息：

Error: (SystemJS) require is not defined

这是跟踪日志：

create:22 Error: (SystemJS) require is not defined
    ReferenceError: require is not defined
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:41:17)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:881:3)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:883:3)
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
        at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
        at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    Evaluating http://localhost:3000/node_modules/babyparse/babyparse.js
    Error loading http://localhost:3000/node_modules/babyparse/babyparse.js as "babyparse" from http://localhost:3000/app/campaigns/campaign-create.component.js
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:41:17)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:881:3)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:883:3)
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
        at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
        at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    Evaluating http://localhost:3000/node_modules/babyparse/babyparse.js
    Error loading http://localhost:3000/node_modules/babyparse/babyparse.js as "babyparse" from http://localhost:3000/app/campaigns/campaign-create.component.js(anonymous function) @ create:22ZoneDelegate.invoke @ zone.js:203Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308

Answer 1

在您的一个（或多个）文件中，您正在使用 require 语句。

找到它并添加对 node.d.ts 的引用或将其替换为 ES6 样式导入。

添加引用

1) 安装typings

2) 使用打字

安装node.d.ts

3) 将以下行添加到包含 require 语句的文件顶部：

///<reference path="../typings/globals/node/index.d.ts" />

使用 ES6 风格的导入

import {memberName1, memberName2, memberNameN} from "../path/to/file";

编辑

错误不在您的文件中，而是在 babyparse.js 本身。 babyparse.js 中的第 41 行有一个 'require' 语句：

var fs = fs || require('fs').

更改此语句以适合您在项目中加载模块的方式。

顺便说一句，你想在客户端使用它吗？因为 'fs' 是 Node.js 的一个模块。看起来 babyparse 是一个服务器端模块。

尝试使用 BabyParse 时获取“(SystemJS) require is not defined”

Getting '(SystemJS) require is not defined' when trying to use BabyParse

typescript

systemjs

angular