[英]Webpack throws error with Emscripten: Can't resolve '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
> myproject@1.0.0 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
如何解決? 馬可
有兩種解決方案:
-s ENVIRONMENT='web'
,因此請嘗試emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s ENVIRONMENT='web'
或者
webpack.config.js
添加"node": { "fs": "empty" }
字段。 我不知道如何以零配置的方式做到這一點。 Emscripten 的 emcc 命令生成.js
和.wasm
文件。 .js
文件不僅是.wasm
的包裝器,還為 Web 提供了 C/C++ 運行時,更重要的是,在問題中,為.wasm
文件提供了一個通用加載器。
.js
文件的加載器非常全面,默認涵蓋 node、web、web worker 和D8 JS shell 。 這通常會給 Webpack 等打包器帶來問題,因為打包器會嘗試解析源代碼中的所有模塊,包括用於在 nodejs 環境中加載.wasm
文件的require('fs')
,如果有任何模塊,則打包器會產生錯誤不適用於 Web 環境。
避免該問題的一種方法是在emcc
命令中使用ENVIRONMENT
標志。 這將刪除一些有問題的代碼,例如require('fs')
。
另一種方法是通過在 webpack 配置中添加"node": { "fs": "empty" }
來讓 Webpack 忽略fs
模塊。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.