电子打字稿：捆绑一切答案

【问题标题】：Electron-Typescript: Bundling everything电子打字稿：捆绑一切
【发布时间】：2019-03-19 07:05:13
【问题描述】：

我正在尝试使用用 Typescript 编写的电子创建一个 Web 应用程序。我在构建应用程序时遇到问题。具体来说，我不确定如何组合：tsc（将我的.ts 文件转换为.js）然后electron dist/main.js。潜在地，我想运行npm start，它首先编译我的.ts 文件，然后运行电子。谁能评论实现这一目标的最佳方法是什么？

【问题讨论】：

标签： javascript typescript npm electron

【解决方案1】：

使用ts-loader 和 webpack 将.ts 文件与如下配置捆绑在一起，

const path = require("path")
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后在你的 npm 脚本中包含这些，

{
    "build-watch": "webpack -w",
    "electron": "electon dist/main.js"
}

然后使用npm-run-all（或任何其他工具，如concurrently）开始，

npm-run-all start build-watch electron

【讨论】：

@MayankAggarwal 你必须在你的代码中导入它，我已经更新了代码。
@MayankAggarwal 您还必须根据需要更改 entry 和 output 字段。
进行了必要的更改，但 webpack -w 似乎失败了。我收到的错误/警告很少，包括Insufficient number of arguments or no entry found. 和ERROR in Entry module not found: Error: Can't resolve 'main.ts' in '/Users/mayankaggarwal/Desktop/MailApp'。我的条目看起来像：entry: 'main.ts' 存在于根文件夹中。

【解决方案2】：

我建议使用https://webpack.electron.build/。它有在此处添加打字稿支持的说明https://webpack.electron.build/add-ons#typescript

【讨论】：