看完本文,确保你在系统Node.js晋级过程中一往无前!

node晋级问题

  • 本人HB实习,最近的使命是把web端的node从10晋级到16版别,三周期间遇到各种问题,几乎把该踩的坑都踩过了。记录下来,期望给后来的小伙伴带来一些帮助。

方针

  • 晋级至node16.15.0

  • 履行npm run build

  • 履行npm run start

  • 页面成功显示

道路

根本道路图:node晋级 —-> 依靠包适配 —-> python环境适配 —-> 依靠包适配 —-> gulp晋级适配 —-> 依靠包适配 —-> babel晋级适配 —-> 依靠包适配 —-> webpack晋级适配 —-> xxx.loader适配 —-> 依靠包适配

问题汇总

问题一

  • ReferenceError: primordials is not defined

原因

  • 当NodeJS版别是12.0.0以上 和 gulp版别是3.9.x以下时,此两个版别之间存在抵触。

    gulp:4.0.2

    CLI:2.3.0

处理:

  • 办法一:node降级(舍去)

  • 办法二:晋级gulp -> sudo npm install -g gulp

  • 办法三:项目根目录新建npm-shrinkwrap.json,

    • 然后重新履行npm install,这时候再去履行gulp相关操作就不会报错了。注意:这个文件在履行过一次npm install以后,就失效了,下次再履行就没有效果了。
    • 写入:
          {
             "dependencies": {
                "graceful-fs": {
                  "version": "4.2.2"
                  }
             }
           }
      

问题二

  • ERESOLVE unable to resolve dependency tree(无法解析依靠关系树)

原因

  • 由于本地的npm版别太高了

处理

  • sudo npm i –legacy-peer-deps

问题三

  • Module build failed: Error: Cannot find module ‘node-sass’ 原因
  • node版别不匹配的问题

处理

  • sudo npm uninstall –save node-sass
  • npm install –save node-sass

问题四

  • ERESOLVE could not resolve

原因

  • package.json里面包的版别发生了改变,或许新添的包与本来的不匹配,运用npm install 无法下载相应版别的包

处理

    1. 装置rimraf: cnpm(或许npm) install rimraf
    1. 删去node_modules文件夹:rimraf node_modules
    1. 清空缓存:npm cache clean –force
    1. 重新装置淘宝镜像: npm install -g cnpm –registry=regisry.npm.taobao.org
    1. 再次履行命令进行相关包的装置: cnpm i

问题五

  • npm install 是显示需要python环境并且版别>3.6.0

原因

  • (mac自带的是2.7.x)

处理

  • 装置python3.x( > 3.6.0)
  • 配置环境变量

清除npm缓存

  • sudo npm cache clean –force

问题六

  • code ERESOLVE
  • npm ERR! ERESOLVE unable to resolve dependency tree
  • npm ERR!
  • npm ERR! While resolving:xxx
  • npm ERR! Found: eslint@8.0.0
  • node_modules/eslint
  • npm ERR! dev eslint@”8.0.0″ from the root project
  • npm ERR! Could not resolve dependency:
  • npm ERR! peer eslint@”4.19.1″ from dev-hook-utils@1.1.5
  • node_modules/dev-hook-utils
  • npm ERR! dev-hook-utils@”^1.1.5″ from the root project

原因:

  • 上游依靠抵触

处理

  • 无脑改成peer后面的版别
  • 这儿要十分慎重,各种版别依靠,还有可能闭环,呜呜呜~~~~

问题七

  • npm ERR! code 1
  • npm ERR! …..
  • npm ERR! command failed

原因

  • npm版别抵触

处理

  • 1.替换至node版别对应的npm版别(nodejs.org/zh-cn/downl…)

问题八

  • npm ERR! gyp: No Xcode or CLT version detected!

原因

  • 缺少了XCODE的CLI(command-line tools )工具

处理:删了重装

  • sudo rm -rf $(xcode-select -p)
  • sudo rm -rf /Library/Developer/CommandLineTools
  • sudo xcode-select –install

问题九

  • AssertionError [ERR_ASSERTION]: Task never defined: clean

原因

  • Node.js v12+ 不支持 Gulp v3。

处理:

  • v4的语法有些许改动
本来:
gulp.task("less",()) => {
};
​
gulp.task("default",["webpack","clean"]);
​
--------------------------
​
修改为:
gulp.task("less",gulp.series(()) => {
});
​
gulp.task("default",gulp.series("webpack","clean"));

问题十

  • AssertionError [ERR_ASSERTION]: Task never defined: clean 原因:
  • gulpfile.js是从上到下加载

处理:

  • 把clean函数放在前面

问题十一

  • [14:18:15] The following tasks did not complete: build,
  • [14:18:15] Did you forget to signal async completion?

原因:

  • gulp4都是异步函数,没有同步函数了。
  • 每个 gulp 使命(task)都是一个异步的 JavaScript 函数,此函数是一个可以接收 callback 作为参数的函数,或许是一个返回 stream、promise、event emitter、child process 或 observable类型值的函数

处理:

  • 官方发布办法
gulp.task('default',done =>){
  done();
}

问题十二

  • npm ERR! gyp ERR! cwd /Users/xxx/node_modules/node-sass

原因:

  • 版别不匹配

处理

  • 把用不到的库删去

问题十三

  • ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.

    • options has an unknown property ‘quiet’. These properties are valid: object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }

原因: webpack 2 => 4

处理: 注释掉 quiet=true


问题十四

  • Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/xxx/node_modules/babel-preset-stage-2/lib/index.js

原因:

  • bable版别不匹配

处理

  • bable-x 全部最新版别
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack

问题十五

  • TypeError: Cannot read properties of undefined (reading ‘vue’)

原因:

  • vue-loader版别

处理

  • 升至15.x

问题十六

  • Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css] 原因:
  • webPack 晋级到 4.x导致
  • 在之前版别中咱们运用extract-text-webpack-plugin来提取CSS文件,不过在webpack 4.x中则应该运用mini-css-extract-plugin来提取CSS到单独文件中

处理:

  • contenthash 改成 md5:contenthash:hex:20
webpack.xxx.conf.js中
----------------------
const utils = require('./utils')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
​
module.exports = {
  //...
  new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash:7].css')
  })
}
--------------------------
webpack.base.conf.js
--------------------
 test: /.(css|less)$/,
    use: [
     {
      loader:MiniCssExtractPlugin.loader,
    }

问题十七

  • Module build failed: Unknown word

原因:

  • 抵触

处理:

  • 多余的注释掉

问题十八

  • Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

原因:

  • 由于 sass 新版别现在弃用“/”的用法,sass自定义element theme时会报warnning

处理:

  • npm install -g sass-migrator
  • 进入项目node_modules文件
  • 履行sass-migrator division */ .scss

问题十九

  • Warning: Accessing non-existent property ‘which’ of module exports inside circular dependency

原因

  • shelljs版别不兼容

处理

  • 可切换node至v10.版别
  • 晋级shelljs到 v0.8.4 即可处理;晋级shelljs:npm install shelljs@0.8.4 –save (然后在npm rebuild node-sass)

问题二十

  • Module parse failed: Unexpected token (915:0)

原因

  • webpack默认是不能处理vue文件,所以只能咱们自己添加一些额定的插件进行处理它。

处理:

  • npm install vue-loader vue-template-compiler –save-dev
  • 在webpack.conf.js配置
 module:{
    rules:{
        test:"/.vue$/",
        use:{
            loader:"vue-loader"}
        }
}

问题二十一

  • ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

原因:

  • css-loader版别只要 > 1.0.0,minimize失效

处理:

  • 删去minimize

问题二十二

  • DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead (Use node --trace-deprecation ... to show where the warning was created)

原因:

  • extract-text-webpack-plugin不兼容webpack4.x版别

处理:

  • npm install extract-text-webpack-plugin@next

问题二十三

  • CssSyntaxError:xxx: Unknown word

原因:

  • css-loader问题

问题二十四

  • RangeError: Invalid string length

原因:

  • vue-loader问题

问题二十五

  • /deep/编译过错

原因

  • /deep/ 已弃用

处理

  • 修改为 ::v-deep

问题二十六

  • The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.

原因:

  • 晋级至webpack4后未指定mode

处理:

  • webpack.base.conf,js中:
module.exports = {
  ...
    mode: 'development',
  ...
}

问题二十七

  • TypeError: MiniCssExtractPlugin.extract is not a function

原因:

  • webpack(2–>4),[extract-text-webpack-plugin]不再被支持,需要替换为[mini-css-extract-plugin],对应代码也需更改。

处理

  return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader'
    })
-----修改为以下---------
   return [MiniCssExtractPlugin.loader].concat(loaders)

问题二十八

  • Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

原因:

  • webpack.optimize.UglifyJsPlugin在webpack4.x已弃用

处理

  • webpack.conf.js在output同级目录下新增optimization
- new webpack.optimize.UglifyJsPlugin({...})
-----------------------------
+
optimization: {
   minimizer:[new UglifyJsPlugin()
   }

问题二十九

  • Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

原因:

  • webpack4不支持webpack.optimize.CommonsChunkPlugin
  • webpack4删去了CommonsChunkPlugin插件,需要运用内置API optimization.splitChunks 和 optimization.runtimeChunk代替

处理

- new webpack.optimize.CommonsChunkPlugin({...})
--------------------------------
+
optimization: {
  runtimeChunk: {
     name: 'manifest',
   },
   splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
          }
      }
  }
}

问题三十

  • TypeError: fsevents.watch is not a function

原因

  • 版别问题

处理

  • 处理办法:npm install watchman
  • 仍是不可:brew install gcc

问题三十一

  • dev-hook-utils > pre-commit
  • Start to lint staged files
    Start eslintError: Failed to load config “eslint-config-airbnb/base” to extend from.

原因:

  • 依靠缺失

处理:

  • npm i eslint-config-airbnb@[版别号] eslint-plugin-import@[版别号] -D
  • 注:二者版别有依靠,记得要版别兼容不然报错

写在最终

  • 说实话,一路走来,遇到林林总总的问题,好多次想的:把问题抛出去得了,横竖我一个实习生搞不定这么大的问题。可是三个礼拜下来,终于是成功的build、start、显示成功了。收获满满!

  • 星光不负赶路人,韶光不负有心人!!!

  • 共勉!!!