如何根据它是开发环境还是生产环境动态导入或要求 js 文件？

Question

问题

我知道ES6 imports和NODE require()使用静态分析，不支持动态路径。但我们该如何应对呢？解决方案是什么？

My Electron应用程序在安装过程中将shortcuts.js文件从开发(项目(文件夹[project_dir]/public/resources复制到[app_installation_dir]/resources文件夹中。

所以问题是：

• 在开发过程中，应用程序应导入../public/resources/shortcuts.js
• 在生产中，应用程序应导入[app_installation_dir]/resources/shortcuts.js

我无法指定生产的"非动态"路径，因为我事先不知道[app_installation_dir]路径是什么。

代码

我尝试了以下几种，但预计只有else早午餐有效：

const shortcuts = process.env.NODE_ENV === 'production'
? require(`${process.resourcesPath}/shortcuts.js`).data
: require(../public/resources/shortcuts.js`).data

安装应用程序后，在生产中，我得到了错误：

Uncaught Error: Cannot find module [app_installation_dir]/resources/shortcuts.js

因为，我猜require并不认为动态路径是可以导入的(我检查过了，文件存在于该路径(。

然后我将文件从module.exports转换为export default {}，并尝试了以下ES6方法，但我得到了相同的错误：

if (process.env.NODE_ENV === 'production') {
const importPath = path.join(process.resourcesPath, 'shortcuts.js')
import(importPath)
.then((data) => {
console.log('IMPORT DATA', data)
})
}
else if (process.env.NODE_ENV === 'development') {
import('../public/resources/shortcuts.js')
.then((data) => {
console.log('IMPORT DATA', data)
})
}

babel.config.js

module.exports = {
presets: [  
'@vue/cli-plugin-babel/preset',
]
}

已创建项目

vue create app-name
> selected [babel, eslint]

vue add electron-builder

Answer 1

有趣。假设路径是绝对的，我不明白为什么require方法不起作用。如果shortcuts.js包含可以导出为纯JSON的数据，也许我会尝试将该文件转换为JSON，并使用文件系统读取和解析它

import fs from 'fs'
const shortcuts = JSON.parse(process.env.NODE_ENV === 'production'
? fs.readFileSync(`${process.resourcesPath}/shortcuts.json`).toString())
: fs.readFileSync(`../public/resources/shortcuts.js`).toString()).data