我运行npm时出现错误,并在javascript中使用webpack和babel开始运行

时间:2018-11-01 21:51:15

标签: javascript npm webpack babel

在我运行npm run start时显示错误:

package.json:

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "deepika",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  }
}

Sajjas-MacBook-Air:forkify maneesh $ npm运行开始

  

forkify@1.0.0开始/ Users / maneesh / Desktop / udemyPractice / javascript / forkify

     

webpack-dev-server-模式开发--open

module.js:538

throw err;

^

错误:找不到模块'webpack / bin / config-yargs'

at Function.Module._resolveFilename (module.js:536:15)

at Function.Module._load (module.js:466:25)

at Module.require (module.js:579:17)

at require (internal/module.js:11:18)

at Object.<anonymous> (/Users/maneesh/Desktop/udemyPractice/javascript/forkify/node_modules/webpack-dev-server/bin/webpack-dev-server.js:54:1)

at Module._compile (module.js:635:30)

at Object.Module._extensions..js (module.js:646:10)

at Module.load (module.js:554:32)

at tryModuleLoad (module.js:497:12)

at Function.Module._load (module.js:489:3)

npm错误!代码ELIFECYCLE

npm错误! errno 1

npm错误! forkify@1.0.0开始:webpack-dev-server --mode development --open

npm错误!退出状态1

npm错误!

npm错误!在forkify@1.0.0启动脚本处失败。

npm错误! npm可能不是问题。上面可能还有其他日志记录输出。

npm错误!可以在以下位置找到此运行的完整日志:

npm错误! /Users/maneesh/.npm/_logs/2018-10-28T16_15_07_352Z-debug.log

错误日志:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using npm@5.5.1
3 info using node@v8.9.3
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle forkify@1.0.0~predev: forkify@1.0.0
6 info lifecycle forkify@1.0.0~dev: forkify@1.0.0
7 verbose lifecycle forkify@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle forkify@1.0.0~dev: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/maneesh/Desktop/udemyPractice/javascript/forkify/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle forkify@1.0.0~dev: CWD: /Users/maneesh/Desktop/udemyPractice/javascript/forkify
10 silly lifecycle forkify@1.0.0~dev: Args: [ '-c', 'webpack --mode development' ]
11 silly lifecycle forkify@1.0.0~dev: Returned: code: 2  signal: null
12 info lifecycle forkify@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: forkify@1.0.0 dev: `webpack --mode development`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:280:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid forkify@1.0.0
15 verbose cwd /Users/maneesh/Desktop/udemyPractice/javascript/forkify
16 verbose Darwin 17.7.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v8.9.3
19 verbose npm  v5.5.1
20 error code ELIFECYCLE
21 error errno 2
22 error forkify@1.0.0 dev: `webpack --mode development`
22 error Exit status 2
23 error Failed at the forkify@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Search.js:

export default 'I am an exported string';

searchView.js

export const add = (a, b) => a + b;
export const mul = (a, b) => a * b;
export const ID=23;
index.js:

//全局应用程序控制器

import str from './models/Search';

import  add from './views/searchView';
import  mul from './views/searchView';
import  ID from './views/searchView';
console.log(`Using imported functions ${add(3, 2)}`);
console.log(`Using imported functions ${mul(ID, 2)}`);
console.log(str);

webpack.config.js:

//它包含4个部分:入口点,输出,加载程序和插件。

const path = require('path');
const HtmlWebpackPlugin= require('html-webpack-plugin');
module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer:{
        contentBase:'./dist'
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./src/index.html'
        })
    ],
    module:{
        rules:[
            {
 test:/\.js$/,
exclude: /node_modules/,
                use: {
                    loader:'babel-loader'
                }
            }
        ]
    }

};

0 个答案:

没有答案