Angular 4:“找不到名称'需要' [英] Angular 4: "Cannot find name 'require'

问题描述

我正在使用 Angular 4 和 webpack 构建应用.

I am building an app with Angular 4 and webpack.

我的一个组件中有以下内容:

I have the following in one of my components:

ngOnInit() {
    require('/assets/js/regular-expresions.js');
}

当我尝试编译时，我得到:

When I attempt to compile, I get:

错误在C:/SRC/Sandbox/eat-sleep-code.com/src/app/content.component.ts (21,9):找不到名称需要".

ERROR in C:/SRC/Sandbox/eat-sleep-code.com/src/app/content.component.ts (21,9): Cannot find name 'require'.

我已经运行了 npm install @types/node --save-dev 并更新了我的 tsconfig.json 看起来像:

I have ran npm install @types/node --save-dev and updated my tsconfig.json to look like:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

但是，同样的错误不断被抛出.有什么想法吗?

But alas, the same error keeps getting thrown. Any ideas?

这是我的 package.json:

Here is my package.json:

{
  "name": "eat-sleep-code.com",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/node": "^6.0.69",
    "angularfire2": "^2.0.0-beta.8",
    "core-js": "^2.4.1",
    "firebase": "^3.7.8",
    "jquery": "^3.2.1",
    "jquery-validation": "^1.16.0",
    "ng2-gist": "^1.0.0",
    "promise-polyfill": "^6.0.2",
    "requirejs": "^2.3.3",
    "rxjs": "^5.1.0",
    "typescript": "^2.2.2",
    "web-animations-js": "^2.2.4",
    "webpack": "^2.4.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.69",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "^2.2.2",
    "webpack": "^2.4.1"
  }
}

推荐答案

require() 不建议使用，原因有几个.一，它会破坏" webpack 2 中 tree-shaking 的有效性；二，它会阻止正确的代码拆分.

require() is not advisable for a few reasons. One, it will "break" the effectiveness of tree-shaking in webpack 2 and two, it will prevent proper code splitting.

更好的选择是使用 webpack 的 System.import 实现:

A far better alternative is to use webpack's implementation of System.import:

System.import('/assets/js/regular-expresions.js').then(file => {
   // perform additional interactions after the resource has been asynchronously fetched
});

为了满足 Typescript 编译器的要求(如您所见)，您需要通过声明来告诉它 System 是一个可接受的变量:

In order to satisfy the Typescript compiler (as you have found), you will need to tell it that System is an acceptable variable by declaring it:

declare var System: any;    

如果您只打算引用它一次，您可以将此行添加到您的组件中，或者您可以将其添加到 typings.d.ts 类型定义文件以使其在整个应用程序中使用.请注意，如果您更改了 Typings 文件，您将需要重新启动 ng serve 会话.

You can either add this line to your component if you only intend to reference it once, or you can add it to the typings.d.ts type definition file to enable its use throughout your app. Note that if you change the typings file, you will need to restart the ng serve session.

这在构建时满足编译器，并且在运行时被构建系统劫持，将调用修补到 Webpack 的 System.import.

This satisfies the compiler at build time and it gets hijacked at runtime by the build system, patching the call through into Webpack's System.import.

Webpack 反过来会检查它是否有一个块满足请求的文件，如果没有，它会动态地创建一个脚本标签并将其插入头部，使用 async 加载文件 属性，这就是本例中发生的情况.

Webpack in turn will check to see if it has a chunk that satisfy the requested file and, if it does not, it will dynamically create a script tag and insert it into the head, loading the file with the async attribute, which is what occurs in this case.

一旦文件加载，它就会被解析和执行.但是，如果您想通过异步 .then() 回调与其任何部分进行交互，则您的文件将需要导出您希望调用的任何内容，例如:

Once the file loads, it will be parsed and executed. However, if you want to interact with any part of it via the async .then() callback, your file will need to export anything you wish to invoke, such as:

export function test() {
    console.log('we called test');
}

这会将 .test() 函数暴露给您的回调处理程序:

This will expose the .test() function to your callback handler:

System.import('/assets/js/regular-expresions.js').then(file => {
   file.test();
});

这篇关于Angular 4:“找不到名称'需要'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！