npm,webpack学习中遇到的各种问题
2016-11-19 13:09
771 查看
问题:打包的时候报错Uncaught ReferenceError: regeneratorRuntime is not defined解决:详见babel-plugin-transform-runtime babel-pollyfill and babel-runtime babel的polyfill和runtime的区别你可以试试在代码的最前面添加require(‘babel-pollyfill’);问题:npm的peerDependencies没有自动安装在npm1/2中会自动安装,但是在npm3的时候不会自动安装。而是给出警告 peerDependencies介绍及简析问题:export default 和module.export的区别报错信息如下:The root route must render a single element解决:因为我的被导入模块是class Test extend React.ReactComponent,同时使用了import React from "React",是符合ES6模块规范的,而最后我通过module.export导出的,所以报错了。直接采用export dfault 就可以了!还有可能的原因见这里,这也是我们一般获取组件的时候会采用下面的方式原因:const Comp = (hasParams(dataPath) || pageData) && err !== 404 ?Template.default || Template : NotFound.default || NotFound;问题:当使用babel直接打包的js文件含有jsx语法的时候报错解答:修改package.json添加react"babel": {"presets": ["es2015-ie","react","stage-0"],"plugins": ["add-module-exports"]}问题:当使用html-webpack-plugin时候找不到指定的template文件{test: /\.html?$/,use:{loader: require.resolve('html-loader'),options:{}}}也就是将以前的file-loader修改为html-loader就可以了问题:webpack脚手架出现missingDependencies missingDependencies: [ '/less-loader', '/less-loader.js', '/less-loader.json', '/less-loader/package.json' ] },问题:windows下查找不到文件Module not found: Error: Can't resolve 'C:UsersAdministratorDesktopmdwpostsdemo2.md' in 'C:\Users\Administrator\Desktop\mdw\lib\utils'解决:使用path.sep切割一下,然后连接起来const filePath = path.join(process.cwd(), filename).split(path.sep).join("/");使用require.resolve去查找模块,而不是使用cwd+plugin这种方式问题:端口被占用 npm start> @ start /Users/qingtian/Desktop/dva/examples/user-dashboard> dora --plugins "proxy,webpack,webpack-hmr" proxy: load rule from proxy.config.js(node:853) DeprecationWarning: 'GLOBAL' is deprecated, use 'global' proxy: listened on 8989Caught exception: Error: listen EADDRINUSE :::8989(1)运行下面命令查询端口号占用的进程:lsof -i:8989输入如下信息:COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEnode 828 qingtian 14u IPv6 0x792c409c75fa7e67 0t0 TCP *:sunwebadmins (LISTEN)(2)执行下面命令杀死进程:kill -9 828(3)接着看原来的端口8989是否被占用:lsof -i:8989此时没有任何信息输出表示没有被占用。当然,还可能是域名被占用,你指定的host已经有ip绑定了问题:写文件失败npm ERR!argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "dva-cli"npm ERR!node v6.9.1npm ERR!npm v3.10.8npm ERR!path /usr/local/lib/node_modulesnpm ERR!code EACCESnpm ERR!errno -13npm ERR!syscall accessnpm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'npm ERR! at Error (native)npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'npm ERR! at Error (native)npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'access',npm ERR! path: '/usr/local/lib/node_modules' }npm ERR! npm ERR! Please try running this command again as root/Administrator.npm ERR! Please include the following file with any support request:npm ERR! /Users/qingtian/Desktop/npm-debug.log(1)首先进入lib目录执行命令chmod 777 node_modules/chmod: Unable to change file mode on node_modules/: Operation not permitted(2)运行如下命令依然不行su root(3)接着运行如下命令sudo -i(4)再次进入lib目录下运行同样的命令cd /usr/local/lib/(5)运行命令chmod 777 node_modules/ 问题:如果报错信息没有明确的指定路径npm ERR! Darwin 15.6.0npm ERR!argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "dva-cli"npm ERR!node v6.9.1npm ERR!npm v3.10.8npm ERR!path ../lib/node_modules/dva-cli/bin/dvanpm ERR!code EACCESnpm ERR!errno -13npm ERR!syscall symlinknpm ERR! Error: EACCES: permission denied, symlink '../lib/node_modules/dva-cli/bin/dva' -> '/usr/local/bin/dva'npm ERR! at Error (native)npm ERR! { Error: EACCES: permission denied, symlink '../lib/node_modules/dva-cli/bin/dva' -> '/usr/local/bin/dva'npm ERR! at Error (native)npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'symlink',npm ERR! path: '../lib/node_modules/dva-cli/bin/dva',//路径不明确,是...npm ERR! dest: '/usr/local/bin/dva' }npm ERR! npm ERR! Please try running this command again as root/Administrator.npm ERR! Please include the following file with any support request:npm ERR! /Users/qingtian/Desktop/npm-debug.lognpm ERR!code 1解决方案,请注意下面这句话:Please try running this command again as root/Administrator.也就是说直接加上sudo就ok了!问题:babel插件找不到,报错信息如下: ReferenceError: Unknown plugin "add-module-exports" specified in "/Users/mm/Desktop/sy-standard-project/.babelrc" 第一步:手动安装babel插件# ES2015转码规则$ npm install --save-dev babel-preset-es2015# react转码规则$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-3$npm install babel-plugin-add-module-exports --save-dev第二步:升级tnpmtnpm i tnpm@3 -g第三步:如果无法解决使用下面的命令rm -rf node_modules && tnpm i问题:为什么启动了webpack服务器后其他的网页无法访问"scripts": {"start": "webpack-dev-server --inline --port 8888"}解决:找到8080占用的端口号,然后断开,并把webpack的端口号设置为8080就可以了问题:报错信息如下SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Users/qingtian/Desktop/webpack-config-mangle/bin/mangle:15:3) at Module._compile (module.js:570:32)解决方案:在package.json中添加如下内容,或者添加一个.babelrc文件"babel": {"presets": ["es2015-ie","stage-0"],"plugins": ["add-module-exports"]}问题:webpack-dev-server报错错误信息如下:TypeError: webpack.validateSchema is not a functionat new Server (/Users/qingtian/Desktop/commonsChunkPlugin_Config/node_modules/webpack-dev-server/lib/Server.js:25:35)at Object.<anonymous> (/Users/qingtian/Desktop/commonsChunkPlugin_Config/hot/webpack-dev-server.js:16:16)at Module._compile (module.js:570:32)at Object.Module._extensions..js (module.js:579:10)at Module.load (module.js:487:32)at tryModuleLoad (module.js:446:12)at Function.Module._load (module.js:438:3)at Module.runMain (module.js:604:10)at run (bootstrap_node.js:394:7)at startup (bootstrap_node.js:149:9)at bootstrap_node.js:509:3解决方案:将package.json中的webpack-dev-server版本修改为入下版本,并运行npm update: "webpack-dev-server": "2.1.0-beta.10"问题:webpack报错> commons_chunk_plugin_config@1.0.0 build /Users/qingtian/Desktop/commonsChunkPlugin_Config> rm -Rf dest/example7 | NODE_ENV=production webpack --config hot/webpack.config.js --progress --env.prodConfig did not export an object.将package.json中的webpack,wepack-dev-server版本:"webpack": "^1.14.0""webpack-dev-server": "2.1.0-beta.10"修改成:"webpack": "2.2.0""webpack-dev-server": "2.2.0"并执行npm update!问题:安装自己开发的npm包无法正常运行,总是报错说缺少哪一个插件解决方法:那是因为--save-dev 和--save的区别,从而把我们依赖的包作为了开发环境的包来安装,其实他是生产环境的包问题:项目移植遇到的问题ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/Components/Button.scssModule build failed: Error: Missing binding /Users/klfang/Desktop/webpack-chunkfilename/node_modules/node-sass/vendor/darwin-x64-51/binding.nodeNode Sass could not find a binding for your current environment: OS X 64-bit with Node.js 7.xFound bindings for the following environments: - OS X 64-bit with Node.js 6.xThis usually happens because your environment has changed since running `npm install`.Run `npm rebuild node-sass` to build the binding for your current environment.解决方案:
npm
install
-g nsudo n 6.9.1删除node_modules重新npm install问题:webpack报错
Uncaught Error: [HMR] Hot Module Replacement is disabled
解决方案:在webpack中添加webpack.hotModuleReplacementPluginnew webpack.HotModuleReplacementPlugin()问题:推送到npm无法正常安装(windows下)
npm ERR! Linux 3.13.0-92-generic npm ERR! argv "/home/travis/.nvm/versions/node/v4.3.1/bin/node" "/home/travis/.nvm/versions/node/v4.3.1/bin/npm" "install" npm ERR! node v4.3.1 npm ERR! npm v3.10.8 npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm ERR! notsup Valid OS: darwin npm ERR! notsup Valid Arch: any npm ERR! notsup Actual OS: linux npm ERR! notsup Actual Arch: x64 npm ERR! Please include the following file with any support request: npm ERR! /home/travis/build/HabitRPG/habitrpg/npm-debug.log
解决方案:npm install-g npm@3.10.7 (更高版本会强制在window下安装fsevent,而fsevent只会在mac系统上可用)参考方案:stackoverflow fseventnpm WARN optional Skipping failed optional dependency /chokidar/fsevents:npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.1npm WARN test@1.0.0 No descriptionnpm WARN test@1.0.0 No repository field.npm ERR! Windows_NT 6.1.7601npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "webpackcf@1.0.3"npm ERR! node v6.9.5npm ERR! npm v3.10.7npm ERR! path C:\Users\Administrator\Desktop\test\node_modules\webpackcf\node .\bin\wcfnpm ERR! code ENOENTnpm ERR! errno -4058npm ERR! syscall chmodnpm ERR! enoent ENOENT: no such file or directory, chmod 'C:\Users\Administrator\Desktop\test\node_modules\webpackcf\node .\bin\wcf'npm ERR! enoent ENOENT: no such file or directory, chmod 'C:\Users\Administrator\Desktop\test\node_modules\webpackcf\node .\bin\wcf'npm ERR! enoent This is most likely not a problem with npm itselfnpm ERR! enoent and is related to npm not being able to find a file.npm ERR! enoentnpm ERR! Please include the following file with any support request:npm ERR! C:\Users\Administrator\Desktop\test\npm-debug.log解决方案:去掉package.json中的下面字段(我们在bin目录下的wcf文件不能有任何后缀,如js,否则不是可执行文件):
"bin":{"wcf" :"node ./bin/wcf"},问题:css无法满足热加载Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案问题.无法推送信息到远程(前提是添加了ssh key)npm ERR!publish Failed PUT 403npm ERR! Darwin 15.6.0npm ERR!argv "/usr/local/bin/node" "/usr/local/bin/npm" "publish"npm ERR!node v6.9.1npm ERR!npm v3.10.8npm ERR!code E403npm ERR! "You cannot publish over the previously published version 1.0.0." : webpack-config-manglenpm ERR! npm ERR! If you need help, you may report this error at:npm ERR! <https://github.com/npm/npm/issues>npm ERR! Please include the following file with any support request:npm ERR! /Users/qingtian/Desktop/webpack-config-mangle/npm-debug.log修改当前目录下的隐藏目录下的config文件,内容如下:[javascript] view plain copyurl = https://username@github.com/username/webpack-compiler-and-compilation.git
相关文章推荐
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(二)
- java web开发中遇到的问题及解决方案(个人学习日志,持续更新)
- play框架配置使用过程中遇到的各种疑难问题汇总(学习同事经验)
- 学习用Flask开发web 及遇到问题
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(一)
- 学习Spring Framework中遇到的各种问题
- 记录Spring.net学习中遇到的各种问题
- 整理iOS工作学习过程中遇到的各种问题
- 在mongoDB学习中遇到的各种问题集合
- Android学习实践:1.初次创建Android项目遇到的各种问题
- [项目过程中所遇到的各种问题记录]学习篇——对工作以来的学习过的开源项目进行总结—动软代码生成工具
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(二)
- 学习 java 各种Reference遇到的问题
- 学习VC、MFC中遇到的各种问题及解决办法
- 机器学习实战python环境搭建以及numpy和matplotlib安装遇到的各种问题(一)
- Python 学习中遇到的各种问题