草庐IT

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

coder 2024-07-17 原文

我正在使用 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

最佳答案

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 目录有一个真实来源是缓解开发人员疲劳的好方法。

    关于javascript - 如何管理 Webpack/Electron 应用程序的配置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44337944/

    javascriptElectroncodestaticwebpacknode.js

    有关javascript - 如何管理 Webpack/Electron 应用程序的配置？的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

      总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

    3. ruby - i18n Assets 管理/翻译 UI - 2

      我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

    4. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

      我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

    5. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

    6. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

      给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

    7. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

    8. ruby - 将差异补丁应用于字符串/文件 - 2

      对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

    9. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

      我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

    10. ruby - 如何指定 Rack 处理程序 - 2

      Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

    随机推荐