Coder Social home page Coder Social logo

Comments (4)

caoxiemeihao avatar caoxiemeihao commented on May 18, 2024

这个会在 [email protected] 中解决~
折腾中~

from electron-vite-vue.

caoxiemeihao avatar caoxiemeihao commented on May 18, 2024

这个会在 [email protected] 中解决~
折腾中~

暂时通过 webpack 打包避开打包问题
https://github.com/caoxiemeihao/electron-vue-vite-webpack

from electron-vite-vue.

caoxiemeihao avatar caoxiemeihao commented on May 18, 2024

又是白白折腾的一天~ 😶
虽然犹大说 [email protected] 是真正的 stable 了；2.0 带来的 Dependency Pre-Bunding 带来的 CommonJS and UMD compatibility 确实让人眼前一亮，加上 esbuild 的加入可谓是真滴流皮；可怜我等小白驾驭不了~
配置如下

require('dotenv').config({ path: join(__dirname, '.env') })

import { join } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    { // polyfill exports
      name: 'custom-template-inject-tag',
      transformIndexHtml: (html) => html.replace('<head>', `<head>
  <script>const exports = module.exports;</script>`),
    },
  ],
  root: join(__dirname, 'src/render'),
  base: './', // index.html 中静态资源加载位置
  server: {
    port: +process.env.PORT,
  },
  resolve: {
    alias: {
      '@': join(__dirname, 'src/render'),
      '@src': join(__dirname, 'src'),
      '@root': __dirname,
    },
  },
  build: {
    outDir: join(__dirname, 'dist/render'),
    assetsDir: '',
    sourcemap: true,
    minify: false,
    emptyOutDir: true,
    rollupOptions: {
      output: {
        format: 'cjs',
      },
      external: ['electron'],
    },
  },
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
})

两个问题

  • exports 需要 polyfill 这个不是 vite 的锅，通过插件搞定他
  • 当引入 electron-store 后编译代码片段如下，俺没辙了 = =
// vendor.ed6bb67c.js
const homedir = path.homedir();
const tmpdir = path.tmpdir();

// ...
const FS = {
  chmodAttempt: attemptify.attemptifyAsync(path.promisify(path.chmod), fs_handlers.default.onChangeError),
  chownAttempt: attemptify.attemptifyAsync(path.promisify(path.chown), fs_handlers.default.onChangeError),
  closeAttempt: attemptify.attemptifyAsync(path.promisify(path.close)),
  fsyncAttempt: attemptify.attemptifyAsync(path.promisify(path.fsync)),
  mkdirAttempt: attemptify.attemptifyAsync(path.promisify(path.mkdir)),
  realpathAttempt: attemptify.attemptifyAsync(path.promisify(path.realpath)),
  statAttempt: attemptify.attemptifyAsync(path.promisify(path.stat)),
  unlinkAttempt: attemptify.attemptifyAsync(path.promisify(path.unlink)),
  closeRetry: retryify.retryifyAsync(path.promisify(path.close), fs_handlers.default.isRetriableError),
  fsyncRetry: retryify.retryifyAsync(path.promisify(path.fsync), fs_handlers.default.isRetriableError),
  openRetry: retryify.retryifyAsync(path.promisify(path.open), fs_handlers.default.isRetriableError),
  readFileRetry: retryify.retryifyAsync(path.promisify(path.readFile), fs_handlers.default.isRetriableError),
  renameRetry: retryify.retryifyAsync(path.promisify(path.rename), fs_handlers.default.isRetriableError),
  statRetry: retryify.retryifyAsync(path.promisify(path.stat), fs_handlers.default.isRetriableError),
  writeRetry: retryify.retryifyAsync(path.promisify(path.write), fs_handlers.default.isRetriableError),
  chmodSyncAttempt: attemptify.attemptifySync(path.chmodSync, fs_handlers.default.onChangeError),
  chownSyncAttempt: attemptify.attemptifySync(path.chownSync, fs_handlers.default.onChangeError),
  closeSyncAttempt: attemptify.attemptifySync(path.closeSync),
  mkdirSyncAttempt: attemptify.attemptifySync(path.mkdirSync),
  realpathSyncAttempt: attemptify.attemptifySync(path.realpathSync),
  statSyncAttempt: attemptify.attemptifySync(path.statSync),
  unlinkSyncAttempt: attemptify.attemptifySync(path.unlinkSync),
  closeSyncRetry: retryify.retryifySync(path.closeSync, fs_handlers.default.isRetriableError),
  fsyncSyncRetry: retryify.retryifySync(path.fsyncSync, fs_handlers.default.isRetriableError),
  openSyncRetry: retryify.retryifySync(path.openSync, fs_handlers.default.isRetriableError),
  readFileSyncRetry: retryify.retryifySync(path.readFileSync, fs_handlers.default.isRetriableError),
  renameSyncRetry: retryify.retryifySync(path.renameSync, fs_handlers.default.isRetriableError),
  statSyncRetry: retryify.retryifySync(path.statSync, fs_handlers.default.isRetriableError),
  writeSyncRetry: retryify.retryifySync(path.writeSync, fs_handlers.default.isRetriableError)
};
// ...

os、fs两个模块怎么莫名其妙的变成了path 😱

from electron-vite-vue.

caoxiemeihao avatar caoxiemeihao commented on May 18, 2024

import 在打包环境下没问题
require 在开发模式下没问题
基于这个“套路”，写了一个 esm2cjs 的 vite 插件；并且在开发模式下启用

可以试试了！折腾死人了！还是我太菜了！😷

from electron-vite-vue.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.