Webpack引发Emscripten错误:无法解决“ fs”

用户名

在将javascript文件导入vue.js组件时遇到错误:

这是/ components子文件夹的内容:

/startingV/src/components$ ls -lah
total 132K
drwxr-xr-x 2 marco marco 4,0K dic 26 11:22 .
drwxr-xr-x 5 marco marco 4,0K dic 26 09:32 ..
-rw-r--r-- 1 marco marco  441 nov  2  2016 Counter.vue
-rw-r--r-- 1 marco marco  441 dic 21 15:13 FormValidation.vue
-rw-r--r-- 1 marco marco 100K dic 26 10:38 js_plumbing.js
-rw-r--r-- 1 marco marco 9,3K dic 26 10:38 js_plumbing.wasm
-rw-r--r-- 1 marco marco  473 dic 26 11:14 Result.vue

编译时:

Failed to compile.

./src/components/js_plumbing.js
Module not found: Error: Can't resolve 'fs' in '/home/marco/cpp/WebAssemblyinAction
/Appendix_B/B.1_ccall/startingV/src/components'

这是Result.vue文件:

template>
    <p button @click="callAdd">Add!</p>
</template>

<script>
    import * as js_plumbing from './js_plumbing'
    export default {
      data () {
        return {
          result: null
        }
      },
      methods: {
        callAdd() {
          const result = Module.ccall('js_plumbing.Add',
              'number',
              ['number', 'number'],
              [1, 2]);
          console.log('Result: ${result}');
        }
      }
    }
</script>

js_plumbing.js和js_plumbing.wasm文件是通过以下命令生成的:

emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap']

其中add.c是:

#include <stdlib.h>
#include <emscripten.h>

// If this is an Emscripten (WebAssembly) build then...
#ifdef __EMSCRIPTEN__
  #include <emscripten.h>
#endif

#ifdef __cplusplus
extern "C" { // So that the C++ compiler does not rename our function names
#endif

EMSCRIPTEN_KEEPALIVE
int Add(int value1, int value2) 
{
  return (value1 + value2); 
}

#ifdef __cplusplus
}
#endif

这是我获取有关如何生成.js和.wasm文件的信息的链接:https ://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#interacting-with-code-ccall-包裹

在执行npn run dev时,在命令行中显示完整的错误消息:

(base) marco@marco-U36SG:~/cpp/WebAssemblyinAction/Appendix_B 
/B.1_ccall/startingV$ npm run dev

> [email protected] dev /home/marco/cpp/WebAssemblyinAction/Appendix_B 
/B.1_ccall/startingV
> cross-env NODE_ENV=development webpack-dev-server --open --hot

✖ 「wdm」: Hash: 12bee4de7abfde1cbc5d
Version: webpack 4.41.3
Time: 6707ms
Built at: 12/26/2019 12:37:07 PM
   Asset      Size  Chunks                    Chunk Names
build.js  2.18 MiB    main  [emitted]  [big]  main
Entrypoint main [big] = build.js
[0] multi (webpack)-dev-server/client?http://localhost:8080   
(webpack)/hot/dev-server.js ./src/main.js 52 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/vue/dist/vue.esm.js] 319 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http:
//localhost:8080] (webpack)-dev-server/client?http://localhost:8080  
4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-
server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-
server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js]   
(webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} 
[built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-
server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] 
(webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] 
(webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main}   
[built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync 
nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js
 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 
bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-
apply-result.js 1.27 KiB {main} [built]
[./src/main.js] 134 bytes {main} [built]
    + 34 hidden modules

ERROR in ./src/components/js_plumbing.js
Module not found: Error: Can't resolve 'fs' in '/home/marco 
/cpp/WebAssemblyinAction/Appendix_B/B.1_ccall/startingV
/src/components'
 @ ./src/components/js_plumbing.js 88:26-39
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader
/lib/selector.js?type=script&index=0!./src/components/Result.vue
 @ ./src/components/Result.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader
/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

怎么解决呢?马可

布姆西克·金

TLDR;

有两种解决方案:

  1. 添加-s ENVIRONMENT='web'您的emcc命令,所以尝试emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s ENVIRONMENT='web'

要么

  1. 在中添加"node": { "fs": "empty" }字段webpack.config.js我不知道如何以零配置的方式做到这一点。

为什么

Emscripten的emcc命令同时生成.js.wasm文件。.js文件不仅是的包装,.wasm而且还为Web提供了C / C ++运行时,更重要的是,该.wasm文件还提供了通用加载程序

.js文件的加载程序非常全面,默认情况下涵盖节点,Web,Web Worker和D8 JS Shell这通常会给诸如Webpack之类的捆绑器带来问题,因为捆绑器会尝试解析源代码中的所有模块,包括require('fs')用于.wasm在nodejs环境中加载文件的模块,并且如果任何模块对于Web环境都不可用,则捆绑器会产生错误。

避免该问题的一种方法是ENVIRONMENTemcc命令中使用标志这将删除一些有问题的代码,例如require('fs')

另一种方法是fs通过添加"node": { "fs": "empty" }webpack配置,让Webpack忽略模块

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

fs readFileSync方法可能引发什么错误?

来自分类Dev

FS.Collection引发403禁止的错误

来自分类Dev

fs错误或硬件?

来自分类Dev

fs.readFileSync错误

来自分类Dev

Fs模块错误

来自分类Dev

NodeJS FS(writeFile)错误

来自分类Dev

无法挂载根fs

来自分类Dev

WSL上的NodeJS + Webpack + Docker项目使用本机'fs'库引发错误

来自分类Dev

Dropbox fs.inotify错误

来自分类Dev

无法在getInitialProps中使用'fs'

来自分类Dev

无法调用模拟的fs.createFileSync和fs.unlinkSync

来自分类Dev

如何解决 nuxt.js 中的“找不到模块:错误:无法解析‘fs’”?

来自分类Dev

node.js npm安装fs错误

来自分类Dev

Nodejs fs | 错误:ENOTDIR:不是目录

来自分类Dev

fs.symlink给我ELOOP错误

来自分类Dev

hadoop fs -ls内存不足错误

来自分类Dev

PhantomJS fs.list()返回错误的长度

来自分类Dev

phonegap构建<平台>-fs.exists错误

来自分类Dev

hadoop fs -ls内存不足错误

来自分类Dev

不会停止的EXT-fs错误

来自分类Dev

随机EXT4 FS错误

来自分类Dev

Nodejs fs | 错误:ENOTDIR:不是目录

来自分类Dev

错误:fs.readFileSync 不是函数

来自分类Dev

侦听 fs.createReadStream 上发出的错误

来自分类Dev

React Native:无法解析模块fs

来自分类Dev

无法从Java执行hadoop fs -put命令

来自分类Dev

无法访问或使用Node的fs模块

来自分类Dev

无法编译 TypeScript:找不到模块“fs”

来自分类Dev

内核和QEMU:无法挂载root fs错误