时间戳

首页 > 解决方案 > 如何根据它是开发环境还是生产环境动态导入或需要 js 文件？

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

问题描述

问题

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

我的 Electron 应用程序在安装期间shortcuts.js将文件从开发（项目）文件夹复制[project_dir]/public/resources到该[app_installation_dir]/resources文件夹​​中。

所以问题是：

我无法为生产指定“非动态”路径，因为我事先不知道[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.exportsto转换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

标签： javascriptnode.jsimportelectron

解决方案

有趣的。假设路径是绝对的，我不明白为什么 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

推荐阅读