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

转载至添加链接描述

问题：打包的时候报错

解决：详见babel-plugin-transform-runtimebabel-pollyfill and babel-runtimebabel的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:UsersAdministratorDesktopmdwlibutils’

解决：使用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绑定了

问题：写文件失败

npmERR!argv “/usr/local/bin/node” “/usr/local/bin/npm” “install” “-g”
“dva-cli”

npmERR!node v6.9.1

npmERR!npm v3.10.8

npmERR!path /usr/local/lib/node_modules

npmERR!code EACCES

npmERR!errno -13

npmERR!syscall access

npmERR! Error: EACCES: permission denied, access
‘/usr/local/lib/node_modules’

npmERR! at Error (native)

npmERR! { Error: EACCES: permission denied, access
‘/usr/local/lib/node_modules’

npmERR! at Error (native)

npmERR! errno: -13,

npmERR! code: ‘EACCES’,

npmERR! syscall: ‘access’,

npmERR! path: ‘/usr/local/lib/node_modules’ }

npmERR!

npmERR! Please try running this command again as root/Administrator.

npmERR! Please include the following file with any support request:

npmERR! /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/ 

问题：如果报错信息没有明确的指定路径

npmERR! Darwin 15.6.0

npmERR!argv “/usr/local/bin/node” “/usr/local/bin/npm” “install” “-g”
“dva-cli”

npmERR!node v6.9.1

npmERR!npm v3.10.8

npmERR!path …/lib/node_modules/dva-cli/bin/dva

npmERR!code EACCES

npmERR!errno -13

npmERR!syscall symlink

npmERR! Error: EACCES: permission denied, symlink
‘…/lib/node_modules/dva-cli/bin/dva’ -> ‘/usr/local/bin/dva’

npmERR! at Error (native)

npmERR! { Error: EACCES: permission denied, symlink
‘…/lib/node_modules/dva-cli/bin/dva’ -> ‘/usr/local/bin/dva’

npmERR! at Error (native)

npmERR! errno: -13,

npmERR! code: ‘EACCES’,

npmERR! syscall: ‘symlink’,

npmERR! path: ‘…/lib/node_modules/dva-cli/bin/dva’,//路径不明确，是…

npmERR! dest: ‘/usr/local/bin/dva’ }

npmERR!

npmERR! Please try running this command again as root/Administrator.

npmERR! Please include the following file with any support request:

npmERR! /Users/qingtian/Desktop/npm-debug.log

npmERR!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.<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 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 install

问题：安装自己开发的npm包无法正常运行，总是报错说缺少哪一个插件

解决方法：那是因为–save-dev 和–save的区别，从而把我们依赖的包作为了开发环境的包来安装，其实他是生产环境的包

问题:webpack报错

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

  new webpack.HotModuleReplacementPlugin()

问题：css无法满足热加载

Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

问题.无法推送信息到远程（前提是添加了ssh key）

npmERR!publish Failed PUT 403

npmERR! Darwin 15.6.0

npmERR!argv “/usr/local/bin/node” “/usr/local/bin/npm” “publish”

npmERR!node v6.9.1

npmERR!npm v3.10.8

npmERR!code E403

npmERR! “You cannot publish over the previously published version
1.0.0.” : webpack-config-mangle

npmERR!

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

npmERR! https://github.com/npm/npm/issues

npmERR! Please include the following file with any support request:

npmERR!
/Users/qingtian/Desktop/webpack-config-mangle/npm-debug.log

修改当前目录下的隐藏目录下的config文件，内容如下：

url = https://[email protected]/username/webpack-compiler-and-compilation.git