角度4:“找不到名称'require' [英] 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): 找不到名称"require".

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中摇树的有效性，二，将防止适当的代码分裂.

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来告诉它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类型定义文件中，以允许在整个应用程序中使用它.请注意，如果更改了打字文件，则需要重新启动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.

文件加载后，将对其进行解析和执行.但是，如果要通过async .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();
});

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