解决Angular12下遇到Webpack5 问题

由于业务需要,需要在系统中使用文件系统,安装fs-extra时出现以下问题

问题1.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'

        - install 'path-browserify'

If you don't want to include a polyfill, you can use an empty module like this:

        resolve.fallback: { "path": false }

问题2.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

        - add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'

        - install 'constants-browserify'

If you don't want to include a polyfill, you can use an empty module like this:

        resolve.fallback: { "constants": false }

问题3.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'

        - install 'stream-browserify'

If you don't want to include a polyfill, you can use an empty module like this:

        resolve.fallback: { "stream": false }

多方寻找解决方法后,使用以下方法得以解决。 

1. 安装path-browserify 和 constants-browserify

    npm i path-browserify --save

    npm i constants-browserify --save

    npm i stream-browserify --save

2. 在tsconfig.json中的compilerOptions下,增加以下内容

"paths": {

      "stream": [ "./node_modules/stream-browserify" ],

      "path": [ "./node_modules/path-browserify" ],

      "constants": ["./node_modules/constants-browserify"]

    },

3.在angular.json中projects->项目名->architect->build->options下增加

"allowedCommonJsDependencies": [

   "stream","path", "constants"

 ],

这样以上问题不出现了,但还有其他问题,问题如下:

./node_modules/graceful-fs/graceful-fs.js:1:9-22 - Error: Module not found: Error: Can't resolve 'fs' in 

./node_modules/jsonfile/index.js:8:8-21 - Error: Module not found: Error: Can't resolve 'fs' in 

解决方法:

在package.json的根部中增加以下内容:

"browser": {

    "fs": false

  }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容