如何管理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或要求文件路径的其他模块.这些类型的资产通常标记为静态资产,因为它们不以任何方式捆绑.webpack只会捆绑required或imported(ES6)的文件.此外,根据您的webpack配置,您的项目根目录可能并不总是与生产版本中的输出相匹配.

根据electron-vue文档的项目结构/文件树,您会发现只有webpack捆绑包和static/目录在生产版本中可用.electron-vue还有一个方便的__static全局变量,可以static/在开发和生产中提供该文件夹的路径.您可以使用此变量类似于一个人如何会与__dirname和path.join访问您的文件,JSON,还是真的任何文件.

静态资产的解决方案

似乎电子vue样板的当前版本已经为您解决了这个问题,但我将描述如何设置webpack它,因为它不仅可以应用于JSON文件以及它如何也适用于任何webpack+ electron设置.以下解决方案假定您的webpack构建输出到单独的文件夹(我们将dist/在这种情况下使用)假定您的webpack配置位于项目的根目录中,并假设在开发期间process.env.NODE_ENV设置为development.

该static/目录

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

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

但是webpack根本不处理这个文件夹,我们能做什么？

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

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

好的,所以资产正在生产中,但是我如何在开发和生产中获得这个文件夹的路径？

创建全局__static变量

制作这个__static变量有什么意义？

1. __dirname在webpack+ electron设置中使用不可靠.在开发期间__dirname 可以参考文件中存在的src/目录.在生产中,由于webpack我们将src/文件捆绑到一个脚本中,因此您形成的路径static/不再存在.此外,那些你把里面的文件src/是不是required或importED永远不会进入你的生产版本.

2. 当处理项目结构与开发和生产的差异时,试图static/在开发过程中遇到非常烦人的路径时必须经常检查你的process.env.NODE_ENV.

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

使用webpack.DefinePlugin我们可以仅在开发中设置我们的__static变量以产生指向的路径.如果您有多个配置,则可以将其应用于a 和流程配置.<projectRoot>/static/webpackmainrenderer

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制成捆绑资产一起是required或import编入一个很好的束.引用的资产fs或需要文件路径的其他模块被视为静态资产,webpack并不直接处理这些资产.使用copy-webpack-plugin和webpack.DefinePlugin我们可以设置一个可靠的__static变量,static/在开发和生产中产生我们的资产目录的路径.

最后,我个人还没有看到任何其他webpack+ electron样板处理这种情况,因为它不是一个非常常见的情况,但我认为我们都同意,将一个事实来源放到静态资产目录是缓解的一个很好的方法开发者疲劳.