插件

尽管 electron-webpack 作为一个单独的模块提供，您也可以安装插件。插件的目的是为了帮助设置某些可能需要大量额外配置或依赖的框架，例如 TypeScript 或 Vue.js。

这些插件是完全可选的，可能不支持所有使用场景。如果您需要更自定义的功能，请知悉 webpack 的完整文档仍然适用于 electron-webpack（更多信息）。

当前插件

JavaScript 框架
- Vue.js
- React JSX
预处理器
- ESLint
- TypeScript
- Less
- Sass/SCSS
- EJS
- Nunjucks
UI 库
- iView
杂项
- 构建通知

JavaScript 框架¶

Vue.js¶

通过使用 vue-loader 添加对 Vue 组件文件的支持。此外，为了开发目的，还将安装 vue-devtools。

yarn add vue electron-webpack-vue --dev

添加 TypeScript 支持¶

安装 TypeScript 插件，然后添加以下文件来填充 Vue 组件文件。

src/renderer/vue-shims.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

当然，请确保让 vue-loader 知道您想在组件文件中使用 TypeScript，方法是使用 lang="ts" 属性。

<template></template>

<script lang="ts">
  /* your TypeScript code */
</script>

<style></style>

添加 ESLint 支持¶

安装 ESLint 插件，安装 eslint-plugin-html，并添加以下额外的配置。

安装 html 插件以 lint Vue 组件文件

yarn add eslint-plugin-html --dev

.eslintrc.js

module.exports = {
  plugins: [
    'html'
  ]
}

React JSX¶

添加对编译 JSX 文件的支持

yarn add @babel/preset-react --dev

为 JSX (`.tsx` 文件) 添加 TypeScript 支持¶

安装 TypeScript 插件，然后扩展您的 tsconfig.json 以包含如下所示的 jsx 编译器选项

tsconfig.json

{
    "extends": "./node_modules/electron-webpack/tsconfig-base.json",
    "compilerOptions": {
        "jsx": "react"
    }
}

预处理器¶

Babel¶

@babel/preset-env 会根据您的 electron 版本自动配置。

所有直接的开发依赖项 babel-preset-* 和 babel-plugin-* 也会自动配置。

ESLint¶

添加使用 eslint 进行脚本文件 linting 的支持。内部使用 eslint、eslint-loader、eslint-friendly-formatter，并在需要时提供 babel-eslint。

yarn add electron-webpack-eslint --dev

在根目录中创建 .eslintrc.js

.eslintrc.js

module.exports = {
  /* your base configuration of choice */
  extends: 'eslint:recommended',

  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true
  },
  globals: {
    __static: true
  }
}

TypeScript¶

添加对编译 TypeScript 脚本文件的支持。内部同时使用 ts-loader 和 fork-ts-checker-webpack-plugin 来编译 *.ts。请注意，入口文件也可以使用 *.ts 扩展名。

yarn add typescript electron-webpack-ts --dev

在根目录中创建 tsconfig.json

{
  "extends": "./node_modules/electron-webpack/tsconfig-base.json"
}

Less¶

添加对编译 Less 样式文件的支持。

yarn add less less-loader --dev

Sass/SCSS¶

添加对编译 Sass/SCSS 样式文件的支持。

yarn add node-sass sass-loader --dev

EJS¶

添加对编译 EJS 模板文件的支持。

yarn add ejs ejs-html-loader --dev

Nunjucks¶

添加对编译 Nunjucks 模板文件的支持

yarn add nunjucks nunjucks-loader --dev

UI 库¶

iView¶

一旦您安装了 Vue.js 插件，electron-webpack 将在内部支持 iView 的 “按需导入” 功能。无需进一步设置。

Element¶

一旦您安装了 element-ui，electron-webpack 将在内部支持 Element 的 “按需导入” 功能。无需进一步设置。

杂项¶

构建通知¶

在开发期间从 webpack 提供操作系统级别的通知。

yarn add webpack-build-notifier --dev

插件