Question

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

我已完成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

这是tracelog：

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）使用typings安装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').

更改此语句以适合您在项目中加载模块的方式。
BTW你想在客户端使用它吗？因为'fs'是Node.js的一个模块。看起来babyparse是一个服务器端模块。

在尝试使用BabyParse时，未定义'（SystemJS）需要'

1 个答案: