web-dev-qa-db-ja.com

Electron + TypeScript + Webpack：ボイラープレートの例

質問の始め方はわかりませんが、主な問題は、Electron + TypeScript + Webpackの3つのテクノロジーを連携させることができないことです。

ボイラープレートはほとんど見つかりませんでしたが、TypeScript全体がtsc（Webpackの代わりに）で構築されているか、render-partのみがWebpackで構築されており、メインプロセス（main.js ）部分は純粋なjsで書かれています。

それで、私は誰かが新しいElectron + TypeScript + Webpackプロジェクトを開始するためのボイラープレートプロジェクトを見つける場所を持っているか知っているのかと思っていましたか？

私が理解している限り、アプリケーションのメインプロセスとレンダリングプロセスの部分を個別にビルドするように構成する必要があります（おそらく、それらの構成が異なる場合があります）。

前もって感謝します。

typescriptwebpackelectronboilerplate
6
Mark Dolbyrev

下のリンクにサンプルテンプレート/ボイラープレートを追加しました

https://github.com/tarunlalwani/electron-webpack-TypeScript-boilerplate

したがって、アイデアは、3つのフォルダーでコードを分割することです

_src
|-- common
|-- main
|-- renderer
_

メインElectronプロセスのコードはmainフォルダーに配置され、UI /レンダラーのコードはrendererフォルダーに配置されます。

次に、両方でTypeScriptを使用し、2つのWebpack構成を使用します。1つはmainのバンドル用で、もう1つはrendererのバンドル用です。

_const path = require('path');

console.log(__dirname);
let common_config = {
  node: {
    __dirname: true
  },
  mode: process.env.ENV || 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: [
          /node_modules/,
           path.resolve(__dirname, "src/ui")
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
};

module.exports = [
  Object.assign({}, common_config, {
    target: 'electron-main',
    entry: {
      renderrer: './src/main/index.ts',
    },
    output: {
      filename: '[name]-bundle.js',
      path: path.resolve(__dirname, 'src/main/dist')
    },
  }),
  Object.assign({}, common_config, {
    target: 'electron-renderer',
    entry: {
      ui: './src/renderer/index.ts',
    },
    output: {
      filename: '[name]-bundle.js',
      path: path.resolve(__dirname, 'src/renderer/dist')
    },
  })
]
_

もう1つの問題は、何もしなければ___dirname_が_/_になることです。したがって、以下をwebpack構成に含めます

_  node: {
    __dirname: true
  },
_

これにより、相対パスが使用可能であることを確認します。これで、開発環境でos.cwd()を使用し、本番環境で_process.resourcePath_を使用できます。詳細については、以下のスレッドを参照してください

Electronを使用して外部実行ファイルを実行およびパックする方法

両方のwebpack構成のターゲットは異なる必要があります。したがって、メインでは_electron-main_を使用し、レンダラーでは_electron-renderer_を使用します

_tsconfig.json_は、mainとrendererの両方で異なる必要があり、互いに除外する必要があります。だから私たちは

renderer/tsconfig.json

_{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es2015",
        "moduleResolution": "node",
        "pretty": true,
        "newLine": "LF",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "allowJs": true,
        "jsx": "preserve"
    },
    "exclude": [
      "node_modules",
      "src/main"
    ]
}
_

main/tsconfig.json

_{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es2015",
        "moduleResolution": "node",
        "pretty": true,
        "newLine": "LF",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "allowJs": true,
        "jsx": "preserve"
    },
    "exclude": [
      "node_modules",
      "src/renderer"
    ]
}
_

最後の主なものはあなたの_package.json_です。

_{
  "name": "boilerplate",
  "version": "1.0.0",
  "main": "src/main/dist/renderrer-bundle.js",
  "license": "MIT",
  "scripts": {
    "start": "npm-run-all build run-electron",
    "build": "webpack --config webpack.config.js",
    "run-electron": "electron ."
  },
  "dependencies": {
    "electron": "^1.8.2",
    "jquery": "^3.3.1",
    "TypeScript": "^2.7.2",
    "webpack": "^4.0.1"
  },
  "devDependencies": {
    "@types/electron": "^1.6.10",
    "@types/jquery": "^3.3.0",
    "@types/node": "^9.4.6",
    "html-webpack-plugin": "^2.30.1",
    "npm-run-all": "^4.1.2",
    "ts-loader": "^4.0.0",
    "tslint": "^5.9.1",
    "webpack-cli": "^2.0.9"
  }
}
_

これはあなたが始めるために必要です、そしてあなたはあなたが進むにつれて物事リンクtslint、jslintを追加することができます

22
Tarun Lalwani

@Tarun Lalwaniは、TypeScript、Webpack、Electronがどのように連携するかを示す良い例です。ただし、HMRやpack-and-distributionなどの機能がありません...

これらの機能を備えたソリューションをすぐに探している人は、 electron-webpack をチェックしてください。クイックスタートの例を見つけることができます ここ-electron-webpack-quick-start

0
iplus26