2017-04-06 70 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