2017-04-06 73 views
1

你好我正在學習Webpack我一直在關注一些教程,並且遇到了一些問題。我在本地安裝了webpack的文件夾,我正在使用npm install webpack --save-dev。我做了兩個JS腳本,我想捆綁它們,並且我嘗試了WindowsPowerShell中的命令webpack script-1.js /.bundle.js(我正在使用Windows 7)。現在,這由下面的錯誤Git Bash和webpack

的WebPack不被識別爲

於是我全局安裝的WebPack內部或外部的命令運行的程序或批處理文件,當我在PowerShell中所使用的相同的命令(我已經打開它作爲管理員),它使bundle.js文件,但不是在我工作的目錄中,但在C:
現在在這個失敗後,我決定嘗試使用git bash。首先,我已經試過這個命令webpack script-1.js /.bundle.js並得到了以下錯誤

bash下的WebPack:找不到命令

最後經過一番努力,我能夠讓它工作在git的慶典node_modules/.bin/webpack ./script-1.js bundle.js使用此命令
有沒有辦法解決這個問題,所以我可以只鍵入webpack而不是整個路徑?還有一種方法可以修復PowerShell中的路徑嗎?

這是我的package.json

{ 
    "name": "webpack-playlist", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/iamshaunjp/webpack-playlist.git" 
    }, 
    "author": "me", 
    "license": "MIT", 
    "bugs": { 
    "url": "https://github.com/iamshaunjp/webpack-playlist/issues" 
    }, 
    "homepage": "https://github.com/iamshaunjp/webpack-playlist#readme", 
    "devDependencies": { 
    "webpack": "^2.3.3" 
    } 
} 

,這是的package.json位於node_modules /的WebPack /的package.json

{ 
    "_args": [ 
    [ 
     { 
     "raw": "webpack", 
     "scope": null, 
     "escapedName": "webpack", 
     "name": "webpack", 
     "rawSpec": "", 
     "spec": "latest", 
     "type": "tag" 
     }, 
     "C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist" 
    ] 
    ], 
    "_from": "[email protected]", 
    "_id": "[email protected]", 
    "_inCache": true, 
    "_location": "/webpack", 
    "_nodeVersion": "7.4.0", 
    "_npmOperationalInternal": { 
    "host": "packages-12-west.internal.npmjs.com", 
    "tmp": "tmp/webpack-2.3.3.tgz_1491205859622_0.6350918470416218" 
    }, 
    "_npmUser": { 
    "name": "sokra", 
    "email": "[email protected]" 
    }, 
    "_npmVersion": "4.0.5", 
    "_phantomChildren": {}, 
    "_requested": { 
    "raw": "webpack", 
    "scope": null, 
    "escapedName": "webpack", 
    "name": "webpack", 
    "rawSpec": "", 
    "spec": "latest", 
    "type": "tag" 
    }, 
    "_requiredBy": [ 
    "#DEV:/", 
    "#USER" 
    ], 
    "_resolved": "https://registry.npmjs.org/webpack/-/webpack-2.3.3.tgz", 
    "_shasum": "eecc083c18fb7bf958ea4f40b57a6640c5a0cc78", 
    "_shrinkwrap": null, 
    "_spec": "webpack", 
    "_where": "C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist", 
    "author": { 
    "name": "Tobias Koppers @sokra" 
    }, 
    "bin": { 
    "webpack": "./bin/webpack.js" 
    }, 
    "bugs": { 
    "url": "https://github.com/webpack/webpack/issues" 
    }, 
    "dependencies": { 
    "acorn": "^4.0.4", 
    "acorn-dynamic-import": "^2.0.0", 
    "ajv": "^4.7.0", 
    "ajv-keywords": "^1.1.1", 
    "async": "^2.1.2", 
    "enhanced-resolve": "^3.0.0", 
    "interpret": "^1.0.0", 
    "json-loader": "^0.5.4", 
    "loader-runner": "^2.3.0", 
    "loader-utils": "^0.2.16", 
    "memory-fs": "~0.4.1", 
    "mkdirp": "~0.5.0", 
    "node-libs-browser": "^2.0.0", 
    "source-map": "^0.5.3", 
    "supports-color": "^3.1.0", 
    "tapable": "~0.2.5", 
    "uglify-js": "^2.8.5", 
    "watchpack": "^1.3.1", 
    "webpack-sources": "^0.2.3", 
    "yargs": "^6.0.0" 
    }, 
    "description": "Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.", 
    "devDependencies": { 
    "beautify-lint": "^1.0.3", 
    "benchmark": "^2.1.1", 
    "bundle-loader": "~0.5.0", 
    "codacy-coverage": "^2.0.1", 
    "codecov.io": "^0.1.2", 
    "coffee-loader": "~0.7.1", 
    "coffee-script": "^1.10.0", 
    "coveralls": "^2.11.2", 
    "css-loader": "~0.25.0", 
    "es6-promise-polyfill": "^1.1.1", 
    "eslint": "3.12.2", 
    "eslint-plugin-node": "^3.0.5", 
    "express": "~4.13.1", 
    "extract-text-webpack-plugin": "^2.0.0-beta", 
    "file-loader": "~0.9.0", 
    "i18n-webpack-plugin": "^0.3.0", 
    "istanbul": "^0.4.5", 
    "jade": "^1.11.0", 
    "jade-loader": "~0.8.0", 
    "js-beautify": "^1.5.10", 
    "less": "^2.5.1", 
    "less-loader": "^2.0.0", 
    "lodash": "^4.17.4", 
    "mocha": "^3.2.0", 
    "mocha-lcov-reporter": "^1.0.0", 
    "nsp": "^2.6.1", 
    "raw-loader": "~0.5.0", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "script-loader": "~0.7.0", 
    "should": "^11.1.1", 
    "simple-git": "^1.65.0", 
    "sinon": "^1.17.7", 
    "style-loader": "~0.13.0", 
    "url-loader": "~0.5.0", 
    "val-loader": "~0.5.0", 
    "vm-browserify": "~0.0.0", 
    "webpack-dev-middleware": "^1.9.0", 
    "worker-loader": "~0.7.0" 
    }, 
    "directories": {}, 
    "dist": { 
    "shasum": "eecc083c18fb7bf958ea4f40b57a6640c5a0cc78", 
    "tarball": "https://registry.npmjs.org/webpack/-/webpack-2.3.3.tgz" 
    }, 
    "engines": { 
    "node": ">=4.3.0 <5.0.0 || >=5.10" 
    }, 
    "files": [ 
    "lib/", 
    "bin/", 
    "buildin/", 
    "hot/", 
    "web_modules/", 
    "schemas/" 
    ], 
    "gitHead": "ba24c1b163dc038ed738eb4a57dcb241bf63146d", 
    "homepage": "https://github.com/webpack/webpack", 
    "license": "MIT", 
    "main": "lib/webpack.js", 
    "maintainers": [ 
    { 
     "name": "jhnns", 
     "email": "[email protected]" 
    }, 
    { 
     "name": "sokra", 
     "email": "[email protected]" 
    }, 
    { 
     "name": "thelarkinn", 
     "email": "[email protected]" 
    } 
    ], 
    "name": "webpack", 
    "optionalDependencies": {}, 
    "readme": "ERROR: No README data found!", 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/webpack/webpack.git" 
    }, 
    "scripts": { 
    "appveyor:benchmark": "npm run benchmark", 
    "appveyor:test": "node --max_old_space_size=4096 node_modules\\mocha\\bin\\mocha --harmony test/*.test.js", 
    "beautify-lint": "beautify-lint 'lib/**/*.js' 'hot/**/*.js' 'bin/**/*.js' 'benchmark/*.js' 'test/*.js'", 
    "benchmark": "mocha test/*.benchmark.js --harmony -R spec", 
    "build:examples": "cd examples && node buildAll.js", 
    "cover": "node --harmony ./node_modules/istanbul/lib/cli.js cover -x '**/*.runtime.js' node_modules/mocha/bin/_mocha -- test/*.test.js", 
    "cover:min": "node --harmony ./node_modules/.bin/istanbul cover -x '**/*.runtime.js' --report lcovonly node_modules/mocha/bin/_mocha -- test/*.test.js", 
    "lint": "eslint lib bin hot buildin test/**/webpack.config.js test/binCases/**/test.js examples/**/webpack.config.js", 
    "lint-files": "npm run lint && npm run beautify-lint", 
    "nsp": "nsp check --output summary", 
    "pretest": "npm run lint-files", 
    "publish-patch": "npm run lint && npm run beautify-lint && mocha && npm version patch && git push && git push --tags && npm publish", 
    "test": "mocha test/*.test.js --harmony --check-leaks", 
    "travis:benchmark": "npm run benchmark", 
    "travis:lint": "npm run lint-files && npm run nsp", 
    "travis:test": "npm run cover:min" 
    }, 
    "version": "2.3.3", 
    "web": "lib/webpack.web.js" 
} 

編輯: 我特地用以下解決方案結束時間: 將此項添加到您的package.json文件中

"scripts" : { 
    "build" : "webpack ./entry.js bundle.js" 
    } 

然後鍵入npm run build這仍然會運行本地版本,因爲npm將首先看./node_modules/.bin/

+0

如果它在'node_modules/.bin'那麼這聽起來像是'webpack'在本地並沒有安裝全球。也許用'npm install -g webpack'再試一次? – Trott

+0

@Trott首先,我在本地安裝它,但因爲它無法正常工作,我在全球範圍內安裝它。然後它在PowerShell中工作,但輸出是在C:不在我的工作文件夾,所以這就是爲什麼我嘗試git bash和本地工作,但我必須使用整個命令路徑,而不是隻使用webpack腳本 - 1.js/.bundle.js目前我已經在我正在使用的文件夾和全局文件夾中安裝了webpack。 – Zvezdas1989

回答

1

這種路徑是在Windows bash的git中使用的。
this issue

我們使用CMDR(http://cmder.net/)來模擬在Windows機器上的控制檯。
儘管如此,我們仍然需要修改腳本和獨立構建來清理和構建任務以使其正常工作。

"scripts": { 
    "clean": "rm -rf dist", 
    "build": "node_modules/.bin/babel-node -- ./node_modules/webpack/bin/webpack.js --stats --config ./webpack/prod.config.js", 
    ... 
}, 

可以在this project package.json看到類似的指令:

"build-main": "cross-env NODE_ENV=production node -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.electron.js --progress --profile --colors", 
+0

在閱讀每一個你添加了很多次的鏈接之後,我仍然不確定我想要做什麼。我想添加「build-main:...」你寫在我的包json位於node_modules?此外,我還將我的package.json添加到了我的問題中,以便您自己查看。 – Zvezdas1989

+0

@ Zvezdas1989是的,這些鏈接的重點在於說明這一點,顯然,您已經使用並指定了這樣的路徑('./ node_modules/webpack/bin'),而不僅僅依靠單獨的命令('webpack') – VonC

+0

謝謝。它現在有效。 – Zvezdas1989