故障现场:

internal/modules/cjs/loader.js:582

    throw err;

    ^

 

Error: Cannot find module 'webpack-cli/bin/config-yargs'

    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)

    at Function.Module._load (internal/modules/cjs/loader.js:506:25)

    at Module.require (internal/modules/cjs/loader.js:636:17)

    at require (internal/modules/cjs/helpers.js:20:18)

    at Object.<anonymous> (/Users/wlc534/workspace/webpack-react-spa/node_modules/webpack-dev-server/bin/webpack-dev-server.js:80:1)

    at Module._compile (internal/modules/cjs/loader.js:688:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)

    at Module.load (internal/modules/cjs/loader.js:598:32)

    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! spa-with-tdtheme@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the spa-with-tdtheme@1.0.0 dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

 

根据提示:Error: Cannot find module 'webpack-cli/bin/config-yargs' 是有模块找不到,那就去node_modules看看,是真没有。很奇怪的是同一个项目,在不同电脑表现不一样。pro正常,air不能启动。能有不同的表现就通过对比找出异同点。

eba87e7a288026f6dd131c0a6819a5fd501.jpgba4f57516949c8e4407d74f0d016f3030be.jpg

改前Package.json

改后Package.json

"webpack": "^4.23.1",
"webpack-bundle-analyzer": "^3.0.3 ",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",

 

"webpack": "^4.23.1",
"webpack-bundle-analyzer": "^3.0.3 ",
"webpack-cli": "3.1.2",
"webpack-dev-server": "^3.1.10",

 

改前Package-lock.json

改后Package-lock.json

"webpack-cli": {
  "version": "3.3.2",
  "resolved": "https://registry.npm.taobao.org/webpack-cli/download/webpack-cli-3.3.2.tgz",
  "integrity": "sha1-rtJDew2wp/qirShIThZqU2ABSpE=",
  "dev": true,
  "requires": {
    "chalk": "^2.4.1",
    "cross-spawn": "^6.0.5",
    "enhanced-resolve": "^4.1.0",
    "findup-sync": "^2.0.0",
    "global-modules": "^1.0.0",
    "import-local": "^2.0.0",
    "interpret": "^1.1.0",
    "loader-utils": "^1.1.0",
    "supports-color": "^5.5.0",
    "v8-compile-cache": "^2.0.2",
    "yargs": "^12.0.5"
  },

 

"webpack-cli": {
  "version": "3.1.2",
  "resolved": "https://registry.npm.taobao.org/webpack-cli/download/webpack-cli-3.1.2.tgz",
  "integrity": "sha1-F9fgG3f4n4hKK7+dtUXw9qZI50Y=",
  "dev": true,
  "requires": {
    "chalk": "^2.4.1",
    "cross-spawn": "^6.0.5",
    "enhanced-resolve": "^4.1.0",
    "global-modules-path": "^2.3.0",
    "import-local": "^2.0.0",
    "interpret": "^1.1.0",
    "loader-utils": "^1.1.0",
    "supports-color": "^5.5.0",
    "v8-compile-cache": "^2.0.2",
    "yargs": "^12.0.2"
  },

 

因为"webpack-cli": "^3.1.2"这种写法,真正安装是3.3.2,恰巧升级是断崖式,目录结构都变了,找不到对应模块。

解决方法:

npm install webpack-cli@3.1.2 -D

package.json 中"webpack-cli": "3.1.2"

package.json依赖管理dependencies中 ^ 和 ~ 的区别

dependencies与devDependencies有什么区别呢?devDependencies 里面的插件只用于开发环境,不用于生产环境dependencies 是需要发布到生产环境的

 

 

pakage.json 中对引入依赖包版本进行管理时,dependencies中常常可以看到类似 ^1.2.0 或 ~1.2.0 这样的版本范围指示。那么,这里的 ^ 和 ~ 具体表示什么含义呢。

这里简单把 ^ 和 ~ 的区别摘抄一下,备忘。

一个完整的版本号组表示为: [主要版本号,次要版本号,补丁版本号]

 npm模块的完整的版本号一般是【主版本 . 次要版本 . 补丁版本】,一般情况下,次要版本号发生改变的话,表示程序有重大更新。

1. 用 ~ 指示范围

如果指定了次要版本,允许补丁版本升级。如果没有指定次要版本,允许次要版本升级。

25eb44c6b215ca0a14802502fffd75068be.jpg

 

 

2. 用 ^ 指定范围

允许不会改变最左边的不为零的版本号的版本提升,也就是说,1.0.0允许次要、补丁版本升级,0.1.0允许补丁版本升级,^0.0.x 不允许升级。

d2e520eb26b88640c0e100f158d5e454faa.jpg

 

转载于:https://my.oschina.net/u/3298482/blog/3051908

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e 4 个月前
8c391e04 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐