TS2304：找不到名称要求和处理

Posted 2023-02-18

【中文标题】TS2304：找不到名称要求和处理

【英文标题】：TS2304: cannot find name require and process

【发布时间】：2017-06-29 23:57:49

【问题描述】：

当我想使用“npm start”启动我的 Angular 2 应用程序时。我收到错误：

我从互联网上尝试了很多“解决方案”，但没有任何效果。 我的版本：

npm - 4.1.2 打字 - 2.1.0 节点 - 7.5.0

tsconfig.json

  "compilerOptions": 
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true

polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') 
  // Production
 else 
  // Development and test
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');

package.json

  "name": "storyWorld",
  "version": "1.0.0",
  "description": "Write your story.",
  "scripts": 
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  ,
  "license": "MIT",
  "dependencies": 
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  ,
  "devDependencies": 
    "@types/jasmine": "^2.5.35",
    "@types/node": "^6.0.63",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "node-sass": "^4.5.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "typescript": "~2.0.10",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0-rc.0",
    "webpack-merge": "^2.4.0"
  

webpack.common.js

    var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = 
  entry: 
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  ,

  resolve: 
    extensions: ['.ts', '.js']
  ,

  module: 
    rules: [
      
        test: /\.ts$/,
        loaders: [
          loader: 'awesome-typescript-loader',
          options:  configFileName: helpers.root('src', 'tsconfig.json') 
         , 'angular2-template-loader']
      ,
      
        test: /\.html$/,
        loader: 'html-loader'
      ,
      
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      ,
      
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract( fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' )
      ,
      
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      ,
      
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
        
    ]
  ,

  plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
       // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin(
      name: ['app', 'vendor', 'polyfills']
    ),

    new HtmlWebpackPlugin(
      template: 'src/index.html'
    )
  ]
;

【问题讨论】：

你解决了吗？我有同样的问题

【参考方案1】：

tsconfig.json：

compilerOptions: 
   ...
   "typeRoots": [ "../node_modules/@types" ],
   ...

或

ma​​in.ts:

/// <reference types="node" />

【讨论】：

"/// " 帮了我，谢谢

"/// " 也帮助了我，谢谢

/// <reference types="node" /> 也适用于我 - 你能解释一下语法吗？这是什么///

【参考方案2】：

tsconfig.json

"compilerOptions": 
        ...,
        "lib": [
            "es2015",
            "es2015.iterable",
            "dom"
        ],
        "types": ["node"],
        ...
    

"types" 属性将删除与 'require'、'process' 相关的错误 而“lib”会删除一些与地图相关的其他错误，...

【参考方案3】：

基于@jordan28 的回答，我还需要将“节点”添加到src 中tsconfig.app.json 文件的types 属性数组中，如here 所解释的那样

【参考方案4】：

对于 Ionic 3.9.9 +Angular 5.0.0 + TypeScript 2.4.2 我必须这样做：

tsconfig.json

"compilerOptions": 
    ...,
    "baseUrl": ".",
    "typeRoots": [ "node_modules/@types" ],
    "types": [ "node" ]
,

package.json

"devDependencies": 
    "@ionic/app-scripts": "3.2.4",
    "@types/node": "7.0.7",
    "typescript": "2.4.2"
,

那么在任何组件或提供者中，package.json 版本属性都可用：

this.version = `v$process.env.npm_package_version`;

会在这样的视图中显示：

v4.2.0