如何管理Webpack/Electron应用程序的配置? [英] How to manage configuration for Webpack/Electron app?

问题描述

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

I am using Webpack 2 and Electron to build nodejs application on Mac.

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

In my project in the root I have directory 'data' where I store configuration in a json like data/configurations/files.json (in practices there are different files with dynamic names)

虽然在进行网络打包后，当我调用: fs.readdirSync(remote.app.getAppPath()); 来获取根目录中的文件时，我只会打包这些文件: ["default_app.js"，"icon.png"，"index.html"，"main.js"，"package.json"，"renderer.js"]

After webpackaing though when I call: fs.readdirSync(remote.app.getAppPath()); to get files in the root I get only these packed: [ "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/在/Users/myuser/myproject/node_modules/electron/dist/Electron.‌app/Contents/Resourc‌es/default_app.asar 中找不到tests/groups.json.因此看来webpacker无法拾取整个数据文件夹.

path.join(remote.app.getAppPath(), 'data/tests/groups.json'); called with FS ReadSync leads to an issue Error: ENOENT, data/tests/groups.json not found in /Users/myuser/myproject/node_modules/electron/dist/Electron.‌​app/Contents/Resourc‌​es/default_app.asar. So it seems that the whole data folder is not picked up by webpacker.

Webpack配置使用的是 json-loader ，我没有找到任何文档提及任何有关包括特定文件或json的特殊信息.还是我必须以不同的方式在代码中引用json文件，因为它们可能被打包在main.js中.

Webpack config is using json-loader and I did not find any documentation mentioning anything special about including specific files or jsons. Or do I have to reference json files in my code differently as they might be packed under main.js.

Electron/Webpack管理JSON配置文件的最佳实践是什么?对项目进行网络打包时，我做错什么了吗?

What is the best practice for Electron/Webpack for managing JSON config files? Am I doing something wrong when webpacking the project?

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

My project is based of https://github.com/SimulatedGREG/electron-vue using webpack/electron/vue

推荐答案

对Webpack的误解

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

The Webpack Misconception

One thing to understand upfront is that webpack does not bundle files required through fs or other modules that ask for a path to a file. These type of assets are commonly labeled as Static Assets, as they are not bundled in any way. webpack will only bundle files that are required or imported (ES6). Furthermore, depending on your webpack configuration, your project root may not always match what is output within your production builds.

基于电子书文档的项目结构/文件树，您会发现只有 webpack 包和 static/目录是在生产版本中可用.electronic-vue也有一个方便的

Based on the electron-vue documentation's Project Structure/File Tree, you will find that only webpack bundles and the static/ directory are made available in production builds. electron-vue also has a handy __static global variable that can provide a path to that static/ folder within both development and production. You can use this variable similar to how one would with __dirname and path.join to access your JSON files, or really any files.

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

It seems the current version of the electron-vue boilerplate already has this solved for you, but I'm going to describe how this is setup with webpack as it can apply to not only JSON files and how it can also apply for any webpack + electron setup. The following solution assumes your webpack build outputs to a separate folder, which we'll use dist/ in this case, assumes your webpack configuration is located in your project's root directory, and assumes process.env.NODE_ENV is set to development during development.

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

During development we need a place to store our static assets, so let's place them in a directory called static/. Here we can put files, such as JSONs, that we know we will need to read with fs or some other module that requires a full path to the file.

现在，我们需要在生产版本中使该 static/资产目录可用.

Now we need to make that static/ assets directory available in production builds.

但是 webpack 根本不处理此文件夹，我们该怎么办?

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

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

Let's use the simple copy-webpack-plugin. Within our webpack configuration file we can add this plugin when building for production and configure it to copy the static/ folder into our dist/ folder.

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 变量

制作此 __ static 变量有什么意义?

1. 在 webpack + electron 设置中，使用 __ dirname 不可靠.在开发过程中， __ dirname 可以引用到 src/文件中存在的目录.在生产中，由于 webpack 将我们的 src/文件捆绑到一个脚本中，因此您形成的到达 static/的路径不再存在.此外，您放置在 src/中的文件，如果没有 require d或 import ，则永远不会进入生产版本.

1. Using __dirname is not reliable in webpack + electron setups. During development __dirname could be in reference to a directory that exists in your src/ files. In production, since webpack bundles our src/ files into one script, that path you formed to get to static/ doesn't exist anymore. Furthermore, those files you put inside src/ that were not required or imported never make it to your production build.

在处理开发与生产之间的项目结构差异时，在开发过程中尝试始终获取 static/的路径非常烦人，必须始终检查您的 process.env.NODE_ENV .

When handling the project structure differences from development and production, trying to get a path to static/ will be highly annoying during development having to always check your process.env.NODE_ENV.

因此，我们通过创建一个真理来源来简化此过程.

使用 webpack.DefinePlugin ，我们可以将 __ static 变量设置为仅在开发中，以产生指向<的路径.projectRoot>/static/.根据您是否具有多个 webpack 配置，可以将其应用于 main 和 renderer 流程配置.

So let's simplify this by creating one source of truth.

Using the webpack.DefinePlugin we can set our __static variable only in development to yield a path that points to <projectRoot>/static/. Depending if you have multiple webpack configurations, you can apply this for both a main and renderer process configuration.

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

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

In production, we need to set the __static variable manually in our code. Here's what we can do...

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 进行读取，这是我们现在可以完成的工作...

Now start using your __static variable

Let's say we have a simple JSON file we need to read with fs, here's what we can accomplish now...

static/someFile.json

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 用于将需要 require d或 import 的资产打包到一个好的捆绑包中.用 fs 引用的资产或需要文件路径的其他模块被视为静态资产，而 webpack 不会直接处理这些资产.使用 copy-webpack-plugin 和 webpack.DefinePlugin ，我们可以设置可靠的 __ static 变量，该变量会生成指向 static/开发和生产中的资产目录.

Conclusion

webpack was made to bundle assets together that are required or imported into one nice bundle. Assets referenced with fs or other modules that need a file path are considered Static Assets, and webpack does not directly handle these. Using copy-webpack-plugin and webpack.DefinePlugin we can setup a reliable __static variable that yields a path to our static/ assets directory in both development and production.

最后，我个人没有见过其他 webpack + electron 样板可以处理这种情况，因为这不是很常见的情况，但是我认为我们可以所有人都同意，在静态资产目录中有一个真理来源是减轻开发人员疲劳的一种绝妙方法.

To end, I personally haven't seen any other webpack + electron boilerplates handle this situation as it isn't a very common situation, but I think we can all agree that having one source of truth to a static assets directory is a wonderful approach to alleviate developer fatigue.

这篇关于如何管理Webpack/Electron应用程序的配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！