我从一个全新的工作非常简单的 Electron-Typescript 应用程序开始。
在这个非常简单的 Electron-Typescript 应用程序中,我在 main.ts 中添加了:
import Ipfs from 'ipfs';
import IpfsHttpClient from 'ipfs-http-client';
这个import
ipfs模块很顺利。
但是当我添加
const { globSource } = IpfsHttpClient;
或者
当我创建一个 IPFS 节点时:
const ops = async () => {
const node = await Ipfs.create({ repo: String(Math.random() + Date.now()) });
}
我收到此错误:
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'jsonfile/utils'
at webpackMissingModule (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:13356:87)
at Object../node_modules/fs-extra/lib/json/output-json.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:13356:176)
at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
at Object../node_modules/fs-extra/lib/json/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:13284:25)
at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
at Object../node_modules/fs-extra/lib/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:13250:6)
at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
at Object../node_modules/ipfs-utils/src/files/glob-source.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:25171:12)
at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
at Object../node_modules/ipfs-http-client/src/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21670:20)
工具/webpack/webpack.main.js:
module.exports = {
entry: ['./src/main.ts'],
// Put your normal webpack config below here
module: {
rules: require('./webpack.rules'),
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
alias: require('./webpack.aliases'),
},
target: 'electron-main'
};
工具/webpack/webpack.renderer.js:
/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');
module.exports = {
target: 'electron-renderer',
module: {
rules,
},
plugins: plugins,
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
alias: {
// React Hot Loader Patch
'react-dom': '@hot-loader/react-dom',
// Custom Aliases
...aliases,
},
},
};
工具/webpack/webpack.rules.js:
const inDev = process.env.NODE_ENV === 'development';
module.exports = [
{
// Add support for native node modules
test: /\.node$/,
use: 'node-loader',
},
{
// Typescript loader
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
{
// CSS Loader
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
// Less loader
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
],
},
{
// Images Loader
test: /\.(gif|jpe?g|tiff|png|webp|bmp)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: 'images',
outputPath: inDev ? 'images' : './main_window/images',
},
},
],
},
];
如果在 tools/webpack/webpack.renderer.js 中修改target
from web':electron-renderer' to
/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');
module.exports = {
//target: 'electron-renderer',
target: 'web',
module: {
rules,
},
plugins: plugins,
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
alias: {
// React Hot Loader Patch
'react-dom': '@hot-loader/react-dom',
// Custom Aliases
...aliases,
},
},
};
在渲染器进程 /src/app/components/App.tsx 我添加:
import Ipfs from 'ipfs';
const { globSource } = Ipfs;
const ops = async () => {
const node = await Ipfs.create({ repo: String(Math.random() +
Date.now()) });
console.log('Ipfs node is ready');
const files = [
{
path: '/home/marco/Downloads/Art21Costituzione.jpg',
content: 'Art21Costituzione'
},
{
path: '/home/marco/Downloads/VitaminaCAlimenti.pdf',
content: 'VitaminaCAlimenti'
}
];
let results = await all(node.addAll(files));
results.map(result => console.log(result));
}
我得到这个正确的输出:
但是渲染器进程中的 globSource 给出了错误:
for await (const file of node.addAll(globSource('/home/marco
/Downloads', globSourceOptions), addOptions)) {
console.log(file);
}
所以.. 我想在 webpack 配置中需要修复一些东西,以使其在主进程中工作,而不是在渲染器进程中。
如何解决问题?