我正在尝试用最少的工具构建一个 react 应用程序。我的 Electron 将加载“hello React”，内容如下: 请注意，react 脚本中的链接是错误的，因为 stackoverflow 不允许 fb.me
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title text="">Electron / Reactjs</title>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<h1> Hello electron root</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
但是，如果我拉出 CDN 脚本标签，则 hello, React 不会加载，并且我在开发控制台或终端中没有错误。这是我的 json 包和 webpack(都在根目录中)
封装json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My Template Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"babel": {
"presets": ["es2015", "stage-0", "react"]
},
"repository": {
"type": "git",
"url": "https://github.com/jtlindsey/<project-name>.git"
},
"author": "J Travis Lindsey",
"license": "Apache-2.0",
"bugs": "https://github.com/jtlindsey/<project-name>/issues",
"homepage": "https://github.com/jtlindsey/<project-name>#readme",
"devDependencies": {
"electron-packager": "^7.1.0",
"electron-prebuilt": "^1.2.5",
"express": "^4.14.0",
"file-loader": "^0.9.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.0",
"webpack-target-electron-renderer": "^0.4.0"
},
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"flux": "^2.1.1",
"react": "^15.1.0",
"react-dom": "^15.1.0"
}
}
webpack.config.js
module.exports = {
context: __dirname + '/,
entry: [
'babel-polyfill',
'./index.js',
html: "./index.html",
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]"
}
]
},
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
plugins: []
};
由于我不明白，package.json 中还有很多我正在使用的内容。我见过react electron template但没有足够的文档让我知道使用 React Flux 和 Electron 需要什么，以及什么是生产力、快速开发、CSS 等。
有人可以提供一个完整的示例，说明如何添加到基本 Electron 应用程序中以与 React 和 Flux 一起使用吗？也许是一个没有样式的细长的 hello world 示例？
我已经能够让 React Web 应用程序正常工作。我已经能够构建一个 Electron 应用程序。但我会尝试使用 npm 的 React 和 Flux 构建一个 Electron 应用程序，而不是像使用 Web 应用程序那样使用 CDN。我错过了什么？
最佳答案
这是最简单的 React 应用程序所需的一切。
<div id="app"></div>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script>
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app');
);
</script>
一旦成功，就开始集成您需要的其他部分。
首先将脚本标记移出到单独的文件中，然后使用 Webpack 对其进行捆绑。
// src/app.js
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app');
);
您需要一个如下所示的 Webpack 配置。
// webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
};
运行 webpack 来构建 bundle ，并将引用 bundle.js 的脚本标记添加到您的 index.html 文件中。
一旦开始工作，您就可以专注于让 Babel 转换发挥作用。您需要使用 Babel 加载器来增强您的 Webpack 配置。
module.exports = {
entry: './src/app.js',
// ...
module: {
loaders: [
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: ['es2015', 'react'] }
]
}
};
此时，您应该能够将 app.js 文件转换为使用 JSX 和 ES6，Babel 会对其进行转换，以便 bundle.js 准备就绪在 Electron 中运行。
关于reactjs - 在 Electron 中使用 React 和 Flux 的最低要求是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38140119/