Windows ./src/client app/index.js-模块构建失败中出错：错误：找不到模块'@巴别塔/核心&x27；

我正在尝试运行一个应用程序写在反应和网页包和网页包开发服务器太。我正在使用Windows。我使用的是：Node v8.9.4 Npm v5.6.0 Webpack v3.11.0 Webpack dev server v2.9.1 我正在执行此命令以启动应用程序：

"start": "webpack-dev-server --config webpack/config/dev.config.js --open",

我在

npm install

和Webpack开始运行时安装了所有这些依赖项（package.json文件），但由于以下错误而失败：

c:\test-dev3\name_app>npm run start
npm info it worked if it ends with ok
npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'run',
npm verb cli   'start' ]
npm info using npm@5.6.0
npm info using node@v8.9.4
npm verb run-script [ 'prestart', 'start', 'poststart' ]
npm info lifecycle name_app@1.0.0~prestart: name_app@1.0.0
npm info lifecycle name_app@1.0.0~start: name_app@1.0.0

> name_app@1.0.0 start c:\test-dev3\name_app
> webpack-dev-server --config webpack/config/dev.config.js --open

Project is running at http://localhost:8080/
webpack output is served from /assets
Content not from webpack is served from ./dist
404s will fallback to /index.html
webpack: wait until bundle finished: /assets/bundle.js
Hash: e5afd651a3e015181387
Version: webpack 3.11.0
Time: 1630ms
                        Asset       Size  Chunks                    Chunk Names
images/login-background-8.jpg     140 kB          [emitted]
                    bundle.js     329 kB       0  [emitted]  [big]  main
images/login-background-2.jpg     294 kB          [emitted]  [big]
images/login-background-4.jpg     428 kB          [emitted]  [big]
images/login-background-6.jpg     243 kB          [emitted]
                bundle.js.map     390 kB       0  [emitted]         main
images/login-background-3.jpg    1.41 MB          [emitted]  [big]
images/login-background-5.jpg    1.41 MB          [emitted]  [big]
images/login-background-7.jpg    1.71 MB          [emitted]  [big]
images/login-background-1.jpg     2.6 MB          [emitted]  [big]
                ../index.html  748 bytes          [emitted]
  [35] multi (webpack)-dev-server/client?http://localhost:8080 ./src/client-app/index.js 40 bytes {0} [built]
  [36] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [37] ./node_modules/url/url.js 23.3 kB {0} [built]
  [39] ./node_modules/url/util.js 314 bytes {0} [built]
  [40] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [43] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [45] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
  [46] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [78] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [80] ./node_modules/html-entities/index.js 231 bytes {0} [built]
  [83] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [84] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
  [85] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [86] ./node_modules/events/events.js 8.33 kB {0} [built]
  [87] ./src/client-app/index.js 1.13 kB {0} [built] [failed] [1 error]
    + 73 hidden modules

ERROR in ./src/client-app/index.js
Module build failed: Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (c:\test-dev3\name_app\node_modules\babel-loader\lib\index.js:1:75)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at loadLoader (c:\test-dev3\name_app\node_modules\loader-runner\lib\loadLoader.js:13:17)
    at iteratePitchingLoaders (c:\test-dev3\name_app\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (c:\test-dev3\name_app\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
    at NormalModule.doBuild (c:\test-dev3\name_app\node_modules\webpack\lib\NormalModule.js:182:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/client-app/index.js
Child html-webpack-plugin for "..\index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 1.1 kB {0} [built]
       [1] ./node_modules/html-webpack-plugin/node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

package.json：

        {
          "name": "name_app",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": {
            "test": "",
            "lint": "eslint src webpack --cache",
            "start": "babel-node webpack-dev-server --config webpack/config/dev.config.js --open",
          },
          "repository": {
            "type": "git",
            "url": ""
          },
          "author": "",
          "license": "",
          "bugs": {
            "url": ""
          },
          "homepage": "",
          "eslintIgnore": [
            "**/node_modules/**",
            "**/dist/**"
          ],
          "devDependencies": {
            "babel-cli": "^6.26.0",
            "babel-core": "^6.26.0",
            "babel-eslint": "^8.0.1",
            "babel-loader": "^8.0.0-beta.0",
            "babel-preset-es2015": "^6.24.1",
            "babel-preset-react": "^6.24.1",
            "babel-preset-stage-0": "^6.24.1",
            "copy-webpack-plugin": "^4.3.1",
            "css-loader": "^0.28.7",
            "eslint": "^4.7.2",
            "eslint-config-airbnb": "^15.1.0",
            "eslint-plugin-import": "^2.7.0",
            "eslint-plugin-jest": "^21.12.2",
            "eslint-plugin-jsx-a11y": "^5.1.1",
            "eslint-plugin-react": "^7.4.0",
            "extract-text-webpack-plugin": "^3.0.1",
            "file-loader": "^1.1.6",
            "html-webpack-harddisk-plugin": "^0.1.0",
            "html-webpack-plugin": "^2.30.1",
            "node-sass": "^4.5.3",
            "rimraf": "^2.6.2",
            "sass-loader": "^6.0.6",
            "style-loader": "^0.19.0",
            "uglifyjs-webpack-plugin": "^0.4.6",
            "url-loader": "^0.6.2",
            "webpack": "^3.11.0",
            "webpack-dev-server": "^2.9.1"
          },
          "dependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-eslint": "^8.0.1",
        "babel-loader": "^8.0.0-beta.0",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "copy-webpack-plugin": "^4.3.1",
        "css-loader": "^0.28.7",
        "eslint": "^4.7.2",
        "eslint-config-airbnb": "^15.1.0",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-jest": "^21.12.2",
        "eslint-plugin-jsx-a11y": "^5.1.1",
        "eslint-plugin-react": "^7.4.0",
        "extract-text-webpack-plugin": "^3.0.1",
        "file-loader": "^1.1.6",
        "html-webpack-harddisk-plugin": "^0.1.0",
        "html-webpack-plugin": "^2.30.1",
        "node-sass": "^4.5.3",
        "rimraf": "^2.6.2",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.0",
        "uglifyjs-webpack-plugin": "^0.4.6",
        "url-loader": "^0.6.2",
        "webpack": "^3.11.0",
        "webpack-dev-server": "^2.9.1"      
        }
  }

dev.config.js：

var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var OutputFiles = require('../output-files');

module.exports = {
  entry: OutputFiles.entryDev,
  output: {
    filename: OutputFiles.bundle,
    path: path.resolve(__dirname, OutputFiles.distPath),
    publicPath: OutputFiles.publicPath,
    libraryTarget: 'umd',
    library: ['FF', 'CMS']
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ],
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: 'css-loader'
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' }, // creates style nodes from JS strings
          {
            loader: 'css-loader', // translates CSS into CommonJS
            query: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              // localIdentName: '[local]__[hash:base64:5]',
              localIdentName: '[local]'
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['src/styles'], // compiles Sass to CSS
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: 'assets/images/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
   new CopyWebpackPlugin([{ from: 'static' }]),
    new HtmlWebpackPlugin({
      filename: '../index.html',
      template: 'index.html',
      inject: 'head',
      alwaysWriteToDisk: true
    }),
    new HtmlWebpackHarddiskPlugin()
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  }
};

index.js：

import { render, unmountComponentAtNode } from 'react-dom';

import EventEmitter from 'events';
import React from 'react';
import app from './cms-app';
import { load as optionsLoad } from './options';

export default function compose(options) {
  const emitter = new EventEmitter();
  const cmsOptions = optionsLoad(options);

  const container = document.querySelector(options.selector);
  console.log(container);
  const CMSApp = app(emitter, cmsOptions);

  return {
    render() {
      render(<CMSApp />, container);
    },
    on(event, handler) {
      return emitter.on(event, handler);
    },
    off(event, handler) {
      return handler
        ? emitter.removeListener(event, handler)
        : emitter.removeAllListeners(event);
    },
    dispose() {
      emitter.removeAllListeners();
      return unmountComponentAtNode(container);
    }
  };
}

从'react dom'导入{render，unmountComponentAtNode}；
从“事件”导入EventEmitter；
从“React”导入React；
从“/cms应用程序”导入应用程序；
从“/options”导入{load as options load}；
导出默认函数组合（选项）{
常量发射器=新的EventEmitter（）；
const cmsOptions=选项加载（选项）；
const container=document.querySelector（options.selector）；
控制台日志（容器）；
常数CMSApp=app（发射器，cmsOptions）；
返回{
render（）{
渲染（，容器）；
},
打开（事件、处理程序）{
返回发射器.on（事件，处理程序）；
},
关闭（事件、处理程序）{
返回处理器
？发射器。removeListener（事件、处理程序）
：emitter.removeAllListeners（事件）；
},
处置{
emitter.removeAllListeners（）；
返回unmountComponentAtNode（容器）；
}
};
}

从

package.json

中删除所有

依赖项

，只保留

devdependency

，因为它们是纯粹用于开发目的的编译时依赖项

删除节点模块文件夹

npm再次安装

将

package.json

中的启动脚本替换为

“启动”：“webpack dev server--config webpack/config/dev.config.js--open”

，您不需要使用

babel节点执行
webpack dev server
，因为您已经指示webpack为您运行babel

---

另外，您不需要全局安装的npm包作为依赖项，本地的就足够了，因为它们的版本与特定的项目相关联。在需要全局项目生成器（如yeoman或create react app）的情况下，全局生成器可能会有所帮助。

解决此问题的方法之一是在

webpack.config.js

文件所在的根目录中创建

.babelrc

文件，并添加：

{
  "presets": ["react", "es2015", "stage-0"]
}

---

与当前一样，和已安装在您的开发和项目依赖项中

我在.babelrc中有此预设，我得到了相同的错误。我执行了所有步骤，但得到了相同的错误结果。什么是应用程序尝试加载一些文件？

{
  "presets": ["react", "es2015", "stage-0"]
}