找不到模块'c：\ test-dev3 \ test_name \ webpack-dev-server'

时间：2018-02-20 17:22:39

标签： reactjs npm webpack babeljs webpack-dev-server

我正在尝试运行用React和Webpack以及webpack-dev-server编写的应用程序。 我在package.json中更改了运行脚本，因为这段代码是在Unix上编写的，我使用的是Windows。我是新手，我很失落。

我正在使用： 节点v8.9.4 Npm v5.6.0 Webpack v3.11.0 Webpack-dev-server v2.9.1

之前运行的脚本是：

"start": "babel-node $(npm bin)/webpack-dev-server --config webpack/config/dev.config.js --open",

然后我换了：

"start": "babel-node node_modules/.bin/webpack-dev-server --config webpack/config/dev.config.js --open"

此外，在此之前，我安装了

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

然后我运行npm install来安装所有依赖项。

但是当我尝试执行运行脚本时，我收到了这个错误。

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
> babel-node node_modules/.bin/webpack-dev-server --config webpack/config/dev.config.js --open

c:\test-dev3\name_app\node_modules\.bin\webpack-dev-server:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Module._extensions..js (module.js:654:10)
    at Object.require.extensions.(anonymous function) [as .js] (c:\test-dev3\name_app\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at Object.<anonymous> (c:\test-dev3\name_app\node_modules\babel-cli\lib\_babel-node.js:154:22)
npm verb lifecycle name_app@1.0.0~start: unsafe-perm in lifecycle true
npm verb lifecycle name_app@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;c:\test-dev3\name_app\node_modules\.bin;C:\Users\rubena\AppData\Roaming\npm;C:\Program Files\nodejs\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\TortoiseGit\bin;C:\Users\rubena\AppData\Local\Microsoft\WindowsApps;;C:\Program Files\Microsoft VS Code\bin;C:\Users\rubena\AppData\Roaming\npm
npm verb lifecycle name_app@1.0.0~start: CWD: c:\test-dev3\name_app
npm info lifecycle name_app@1.0.0~start: Failed to exec start script
npm verb stack Error: name_app@1.0.0 start: `babel-node node_modules/.bin/webpack-dev-server --config webpack/config/dev.config.js --open`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
npm verb stack     at emitTwo (events.js:126:13)
npm verb stack     at EventEmitter.emit (events.js:214:7)
npm verb stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
npm verb stack     at emitTwo (events.js:126:13)
npm verb stack     at ChildProcess.emit (events.js:214:7)
npm verb stack     at maybeClose (internal/child_process.js:925:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
npm verb pkgid name_app@1.0.0
npm verb cwd c:\test-dev3\name_app
npm verb Windows_NT 10.0.15063
npm verb argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
npm verb node v8.9.4
npm verb npm  v5.6.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! name_app@1.0.0 start: `babel-node node_modules/.bin/webpack-dev-server --config webpack/config/dev.config.js --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the name_app@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm verb exit [ 1, true ]

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user_name\AppData\Roaming\npm-cache\_logs\2018-02-20T16_05_22_544Z-debug.log

然后我发现我必须从运行开始删除“node_modules/.bin/”。但是当我在没有它的情况下运行这个脚本时：

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

我收到了这个新错误。它喜欢它找不到模块配置。

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
> babel-node webpack-dev-server --config webpack/config/dev.config.js --open --exit 0

module.js:540
    throw err;
    ^

Error: Cannot find module 'c:\test-dev3\name_app\webpack-dev-server'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Function.Module.runMain (module.js:684:10)
    at Object.<anonymous> (c:\test-dev3\name_app\node_modules\babel-cli\lib\_babel-node.js:154:22)
    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 Function.Module.runMain (module.js:684:10)
npm verb lifecycle name_app@1.0.0~start: unsafe-perm in lifecycle true
npm verb lifecycle name_app@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;c:\test-dev3\name_app\node_modules\.bin;C:\Users\rubena\AppData\Roaming\npm;C:\Program Files\nodejs\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\TortoiseGit\bin;C:\Users\rubena\AppData\Local\Microsoft\WindowsApps;;C:\Program Files\Microsoft VS Code\bin;C:\Users\rubena\AppData\Roaming\npm
npm verb lifecycle name_app@1.0.0~start: CWD: c:\test-dev3\name_app
npm info lifecycle name_app@1.0.0~start: Failed to exec start script
npm verb stack Error: name_app@1.0.0 start: `babel-node webpack-dev-server --config webpack/config/dev.config.js --open --exit 0`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
npm verb stack     at emitTwo (events.js:126:13)
npm verb stack     at EventEmitter.emit (events.js:214:7)
npm verb stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
npm verb stack     at emitTwo (events.js:126:13)
npm verb stack     at ChildProcess.emit (events.js:214:7)
npm verb stack     at maybeClose (internal/child_process.js:925:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
npm verb pkgid name_app@1.0.0
npm verb cwd c:\test-dev3\name_app
npm verb Windows_NT 10.0.15063
npm verb argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
npm verb node v8.9.4
npm verb npm  v5.6.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! name_app@1.0.0 start: `babel-node webpack-dev-server --config webpack/config/dev.config.js --open --exit 0`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the name_app@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm verb exit [ 1, true ]

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user_name\AppData\Roaming\npm-cache\_logs\2018-02-20T16_52_56_428Z-debug.log

这是webpack配置文件：

import CopyWebpackPlugin from 'copy-webpack-plugin';
import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';
import OutputFiles from '../output-files';

export default {
  entry: OutputFiles.entryDev,
  output: {
    filename: OutputFiles.bundle,
    path: path.resolve(__dirname, OutputFiles.distPath),
    publicPath: OutputFiles.publicPath,
    libraryTarget: 'umd',
    library: ['ER', 'CMS']
  },
  module: {
    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
    // hot: true,
  }
};

的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": {
    "apollo-cache-inmemory": "^1.1.5",
    "apollo-client": "^2.2.0",
    "apollo-link": "^1.0.7",
    "apollo-link-http": "^1.3.2",
    "apollo-upload-client": "^7.0.0-alpha.3",
    "fs": "0.0.1-security",
    "graphql": "^0.11.7",
    "graphql-tag": "^2.5.0",
    "immutable": "^3.8.2",
    "material-ui": "^1.0.0-beta.34",
    "material-ui-icons": "^1.0.0-beta.17",
    "moment": "^2.19.4",
    "prop-types": "^15.6.0",
    "ramda": "^0.24.1",
    "react": "^16.0.0",
    "react-apollo": "^2.0.0",
    "react-datetime": "^2.11.1",
    "react-dom": "^16.0.0",
    "react-dropzone": "^4.2.5",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6"
  }
}

1 个答案:

答案 0 :(得分：1)

所以babel-node就像node，但它会从es6 +中转换出你的代码，这对于webpack-dev-server是不需要的。 你应该做的就是删除babel节点。 "start": "webpack-dev-server --config webpack/config/dev.config.js --open"

相关问题
最新问题