我正在尝试运行用React和Webpack以及webpack-dev-server编写的应用程序。我正在使用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",
我安装了所有这些依赖项（package.json文件）和npm install并且Webpack开始运行，但是它失败了这个错误：
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.
在所有研究中，他们说我只是用预设安装和配置.babelrc文件。我不知道我是否需要用Babel做更多事情以及从哪里开始。申请我没有成功。我只是想尝试运行该应用程序。
我还安装了其他全局依赖项：
npm install -g eslint
npm install -g webpack
npm install -g webpack-dev-server
npm install -g babel
npm install -g babel-core
npm install -g babel-cli
npm install -g babel-eslint
npm install react react-dom
npm install --save-dev webpack-dev-middleware webpack-hot-middleware
的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);
}
};
}
答案 0 :(得分：1)
解决此问题的方法之一是在.babelrc文件所在的根目录中创建webpack.config.js文件并添加：
{
"presets": ["react", "es2015", "stage-0"]
}
目前babel-preset-react，您的开发和项目依赖项中已安装babel-preset-es2015和babel-preset-stage-0
答案 1 :(得分：0)
dependencies中删除所有package.json，仅保留devDependencies，因为它们只是纯粹用于开发目的的编译时依赖项。npm install再次。package.json中的起始脚本替换为"start": "webpack-dev-server --config webpack/config/dev.config.js --open"，您不需要使用webpack-dev-server执行babel-node，因为您已经指示webpack为您运行babel P上。 S.您不需要全局安装的npm软件包作为依赖项，本地软件包就足够了，因为它们的版本与特定项目相关联。如果你需要像yeoman或create-react-app这样的全球项目生成器，那么全局项目可能会有所帮助。