npm,webpack学习中遇到的各种问题

问题:打包的时候报错

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 8989

Caught exception: Error: listen EADDRINUSE :::8989

(1)运行下面命令查询端口号占用的进程:

lsof -i:8989

输入如下信息:

COMMAND PID     USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME

node    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.1

npm ERR!npm  v3.10.8

npm ERR!path /usr/local/lib/node_modules

npm ERR!code EACCES

npm ERR!errno -13

npm ERR!syscall access


npm 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.0

npm ERR!argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "dva-cli"

npm ERR!node v6.9.1

npm ERR!npm  v3.10.8

npm ERR!path ../lib/node_modules/dva-cli/bin/dva

npm ERR!code EACCES

npm ERR!errno -13

npm ERR!syscall symlink


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!  { 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.log

npm 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


第二步:升级tnpm

tnpm 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. (/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 function
    at new Server (/Users/qingtian/Desktop/commonsChunkPlugin_Config/node_modules/webpack-dev-server/lib/Server.js:25:35)
    at Object. (/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报错

> [email protected] build /Users/qingtian/Desktop/commonsChunkPlugin_Config
> rm -Rf dest/example7 | NODE_ENV=production webpack --config hot/webpack.config.js --progress --env.prod

Config 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.scss

Module build failed: Error: Missing binding /Users/klfang/Desktop/webpack-chunkfilename/node_modules/node-sass/vendor/darwin-x64-51/binding.node

Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 7.x


Found bindings for the following environments:

  - OS X 64-bit with Node.js 6.x


This usually happens because your environment has changed since running `npm install`.

Run `npm rebuild node-sass` to build the binding for your current environment.


解决方案:

npminstall-g n

sudo n 6.9.1


删除node_modules重新npm install


问题:webpack报错

Uncaught Error: [HMR] Hot Module Replacement is disabled

解决方案:在webpack中添加webpack.hotModuleReplacementPlugin

    new 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 [email protected]: 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 [email protected] (更高版本会强制在window下安装fsevent,而fsevent只会在mac系统上可用)

参考方案:

stackoverflow  fsevent

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator\\A
ppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "webpackcf@1
.0.3"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.7
npm ERR! path C:\Users\Administrator\Desktop\test\node_modules\webpackcf\node .\
bin\wcf
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall chmod
npm 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 itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
npm 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 403

npm ERR! Darwin 15.6.0

npm ERR!argv "/usr/local/bin/node" "/usr/local/bin/npm" "publish"

npm ERR!node v6.9.1

npm ERR!npm  v3.10.8

npm ERR!code E403


npm ERR! "You cannot publish over the previously published version 1.0.0." : webpack-config-mangle

npm ERR! 

npm ERR! If you need help, you may report this error at:

npm ERR!    


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  copy
  1. url = https://[email protected]/username/webpack-compiler-and-compilation.git  

你可能感兴趣的:(npm,webpack学习中遇到的各种问题)