javascript - 如何管理 Webpack/Electron 应用程序的配置？

Question

我正在使用 Webpack 2 和 Electron 在 Mac 上构建 nodejs 应用程序。

在我的项目根目录中，我有一个目录“data”，我将配置存储在 json 中，例如 data/configurations/files.json (实际上有不同的文件具有动态名称)

在 webpackaing 之后，当我打电话时:fs.readdirSync(remote.app.getAppPath());为了在根目录中获取文件，我只打包了这些文件:[ "default_app.js", "icon.png", "index.html", "main.js", "package.json", "renderer.js" ]path.join(remote.app.getAppPath(), 'data/tests/groups.json');使用 FS ReadSync 调用会导致问题 Error: ENOENT, data/tests/groups.json not found in /Users/myuser/myproject/node_modules/electron/dist/Electron.‌​app/Contents/Resourc‌​es/default_app.asar .所以看起来整个数据文件夹没有被 webpacker 拾取。

Webpack 配置正在使用 json-loader而且我没有找到任何文档提到包含特定文件或 jsons 的任何特别之处。或者我是否必须在我的代码中以不同的方式引用 json 文件，因为它们可能打包在 main.js 下。

Electron/Webpack 管理 JSON 配置文件的最佳实践是什么？ webpacking 项目时我做错了什么吗？

我的项目基于 https://github.com/SimulatedGREG/electron-vue使用 webpack/electron/vue

Answer 1

Webpack 的误解

事先要了解的一件事是 webpack不捆绑通过 fs 所需的文件或其他要求文件路径的模块。这些类型的 Assets 通常标记为 静态资源 ，因为它们没有以任何方式捆绑。 webpack只会捆绑 require 的文件d 或 import编(ES6)。此外，取决于您的 webpack配置，您的项目根目录可能并不总是与生产版本中的输出匹配。

基于 Electron vue 文档的 项目结构/文件树 ，你会发现只有webpack捆绑包和 static/目录在生产版本中可用。 Electron-vue 也有一个方便的 __static 可以提供路径的全局变量 static/开发和生产中的文件夹。您可以像使用 __dirname 一样使用此变量。和 path.join访问您的 JSON 文件，或任何文件。

静态 Assets 的解决方案

好像是当前版本的electron-vue样板已经为您解决了这个问题，但我将描述如何使用 webpack 进行设置因为它不仅适用于 JSON 文件，而且它也适用于任何 webpack + electron设置。以下解决方案假设您的 webpack将输出构建到一个单独的文件夹，我们将使用 dist/在这种情况下，假设您的 webpack配置位于项目的根目录中，并假定 process.env.NODE_ENV设置为 development在开发过程中。
static/目录

在开发过程中，我们需要一个地方来存储我们的静态 Assets ，所以让我们将它们放在名为 static/ 的目录中。 .在这里，我们可以放置我们知道需要使用 fs 读取的文件，例如 JSON。或其他需要文件完整路径的模块。

现在我们需要制作 static/生产版本中可用的 Assets 目录。

But webpack isn't handling this folder at all, what can we do?

让我们使用简单的 copy-webpack-plugin .在我们的 webpack 内配置文件我们可以在构建时添加这个插件 用于生产 并将其配置为复制 static/文件夹到我们的 dist/文件夹。

new CopyWebpackPlugin([
    {
      from: path.join(__dirname, '/static'),
      to: path.join(__dirname, '/dist/static'),
      ignore: ['.*']
    }
])

Okay so the assets are in production, but how do I get a path to this folder in both development and production?

创建全局 __static多变的

What's the point of making this __static variable?

使用 __dirname在 webpack 中不可靠+ electron设置。开发中 __dirname可能引用您的 src/ 中存在的目录文件。在生产中，自 webpack捆绑我们的 src/文件合并到一个脚本中，即您形成的路径以到达 static/不存在了。此外，您放入的那些文件 src/不是 require d 或 import ed 永远不会进入您的生产版本。

在处理开发和生产的项目结构差异时，试图获取到static/的路径在开发过程中必须经常检查您的 process.env.NODE_ENV 会非常烦人.

因此，让我们通过创建一个事实来源来简化这一点。

使用 webpack.DefinePlugin我们可以设置我们的 __static变量 仅在开发中 产生一条指向 <projectRoot>/static/ 的路径.取决于您是否有多个 webpack配置，您可以将其应用于 main和 renderer进程配置。

new webpack.DefinePlugin({
    '__static': `"${path.join(__dirname, '/static').replace(/\\/g, '\\\\')}"`
})

在生产中，我们需要设置 __static在我们的代码中手动变量。这是我们可以做的...

index.html ( renderer 进程)

<!-- Set `__static` path to static files in production -->
<script>
    if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<!-- import webpack bundle -->

main.js ( main 进程)

// Set `__static` path to static files in production
if (process.env.NODE_ENV !== 'development') {
    global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

// rest of application code below

现在开始使用您的 __static多变的

假设我们有一个简单的 JSON 文件，我们需要使用 fs 来读取它。 ，这就是我们现在可以完成的...

static/someFile.json

{"foo":"bar"}

someScript.js ( renderer 或 main 进程)

import fs from 'fs'
import path from 'path'

const someFile = fs.readFileSync(path.join(__static, '/someFile.json'), 'utf8')

console.log(JSON.parse(someFile))
// => { foo: bar }

结论
webpack将 Assets 捆绑在一起 require d 或 import编成一个漂亮的包。用 fs 引用的 Assets 或其他需要文件路径的模块被认为是 静态资源 , 和 webpack不直接处理这些。使用 copy-webpack-plugin和 webpack.DefinePlugin我们可以设置一个可靠的 __static产生通往我们 static/ 的路径的变量开发和生产中的 Assets 目录。

最后，我个人还没有看到任何其他 webpack + electron样板文件可以处理这种情况，因为这不是很常见的情况，但我认为我们都同意让静态 Assets 目录有一个真实来源是缓解开发人员疲劳的好方法。