Angular 网页包未捕获引用错误：未定义进程

我有一个未捕获的引用错误：Angular5应用程序中未定义进程错误-none CLI。我知道这个网页应该创建一些全局文件，但我已经配置好了。我不确定为什么该流程不可用-我已在REPL中确认了这一点

我是新来的网页，不知道从哪里开始寻找。有人能帮忙吗

网页包配置

const webpack = require('webpack');
const helpers = require('./helpers');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
const buildUtils = require('./build-utils');

module.exports = function (options) {
  const isProd = options.env === 'production';
  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
  const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
  const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);

  const entry = {
    polyfills: './src/polyfills.browser.ts',
    vendor:    './src/vendor.browser.ts',
    main:      './src/main.browser.ts'
  };

  Object.assign(ngcWebpackConfig.plugin, {
    tsConfigPath: METADATA.tsConfigPath,
    mainPath: entry.main
  });

  return {
    performance: { hints: false },
    entry: entry,
    resolve: {
      mainFields: [ ...(supportES2015 ? ['es2015'] : []), 'browser', 'module', 'main' ],
      extensions: ['.ts', '.js', '.json'],
      modules: [helpers.root('src'), helpers.root('node_modules')],
      alias: buildUtils.rxjsAlias(supportES2015)
    },

    module: {

      rules: [
        ...ngcWebpackConfig.loaders,
        { test: /\.scss$/, use: ['raw-loader', 'sass-loader'] },
        { test: /\.(woff2?|ttf|eot|svg)$/, use: 'url?limit=10000&name=[name].[ext]' },
        { test: /bootstrap\/dist\/js\/umd\//, use: 'imports?jQuery=jquery' },
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader']
        },
        {
          test: /\.html$/,
          use: 'raw-loader',
          exclude: [helpers.root('src/index.html')]
        },
        {
          test: /\.(jpg|png|gif)$/,
          use: 'file-loader'
        }

      ],

    },
    plugins: [
      new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'AOT': METADATA.AOT,
        'process.env.ENV': JSON.stringify(METADATA.ENV),
        'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
        'process.env.HMR': METADATA.HMR,
        'process.env.API_URL': JSON.stringify(METADATA.API_URL)
      }),

      new CommonsChunkPlugin({
        name: ['polyfills', 'vendor'].reverse()
      }),

      new CommonsChunkPlugin({
        minChunks: Infinity,
        name: 'inline'
      }),
      new CommonsChunkPlugin({
        name: 'main',
        async: 'common',
        children: true,
        minChunks: 2
      }),
      new CopyWebpackPlugin([{
        from: 'src/assets',
        to: 'assets'
      }]),
      new HtmlWebpackPlugin({
        template: 'src/index.html',
        title: METADATA.title,
        chunksSortMode: function (a, b) {
          const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
          return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
        },
        metadata: METADATA,
        inject: 'body',
        xhtml: true,
        minify: isProd ? {
          caseSensitive: true,
          collapseWhitespace: true,
          keepClosingSlash: true
        } : false
      }),

      new ScriptExtHtmlWebpackPlugin({
        sync: /inline|polyfills|vendor/,
        defaultAttribute: 'async',
        preload: [/polyfills|vendor|main/],
        prefetch: [/chunk/]
      }),

      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: 'popper.js/dist/umd/popper.js',
        Hammer: 'hammerjs/hammer',
        Rickshaw: 'rickshaw',
        moment: 'moment',
        fullCalendar: 'fullcalendar',
        Raphael: 'webpack-raphael',
        'window.Raphael': 'webpack-raphael',
        Skycons: 'skycons/skycons',
        Dropzone: 'dropzone',
        tinymce: 'tinymce/tinymce.js'
      }),

      new HtmlElementsPlugin({
        headTags: require('./head-config.common')
      }),

      new LoaderOptionsPlugin({}),
      new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin), 
      new InlineManifestWebpackPlugin(),
    ],
    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }

  };
}

我从未在DefinePlugin条目中看到process.env.xxx，您可以尝试删除该部分：

    'ENV': JSON.stringify(METADATA.ENV),
    'NODE_ENV': JSON.stringify(METADATA.ENV),
    'HMR': METADATA.HMR,
    'API_URL': JSON.stringify(METADATA.API_URL)

您需要为应用程序全局定义这些变量，还是仅为构建定义这些变量

如果只是为了您的构建，您不需要DefinePlugin，只需在环境中定义变量，如下所示：

    process.env.ENV = JSON.stringify(METADATA.ENV);
    process.env.NODE_ENV = JSON.stringify(METADATA.ENV);
    process.env.HMR: METADATA.HMR;
    process.env.API_URL: JSON.stringify(METADATA.API_URL);

更新

如果您希望将这些值提供给您的应用程序，我们所做的一件事就是使用用于目标环境的实际值替换字符串保持器

   {
      test: /\.js$/,
      use: [
        {
          loader: StringReplacePlugin.replace({
            replacements: {
              pattern: /_API_URL_/ig,
              replacement: function (match, p1, offset, string) {
                return getApiUrlForEnv(process.env.NODE_ENV);  // implement this
              }
            };
          })
        },
        '@ngtools/webpack'
      ]
    }

---

我在我的webpack配置中通过向true添加一个简单的流程平面来修复此问题，如：

 node: {
  global: true,
  crypto: 'empty',
  process: true,
  module: false,
  clearImmediate: false,
  setImmediate: false,
  fs: 'empty'
}

---

嗨，前者-我需要一种在应用程序中使用的编写全局变量的方法。所以我可以访问一个全局API url，它可以在生产和开发构建中切换。