coffee scriptとvueを使ってelectronのappをつくりたい
ファイル構成はこんな感じです。
my_coffee_electron
├── launch
│ ├── main.js
│ └── package.json
├── package.json
├── src
│ ├── coffee
│ │ └── app.coffee
│ ├── pug
│ │ └── index.pug
│ └── vue
│ ├── my_component.coffee
│ └── my_component.vue
└── webpack.config.js
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
target:'electron',
entry: './src/coffee/app.coffee',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'build')
},
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/pug/index.pug'
})
],
module:{
rules:[
{
test: /\.pug$/,
use: ['raw-loader','pug-html-loader']
},
{
test: /\.coffee$/,
use: ['coffee-loader']
},
{
test: /\.vue$/,
use: ['vue-loader','pug-html-loader']
}
]
}
};
Webpackの設定です。target はelectronになっていますが
これを入れなければwebで実行できるファイルが生成されます。
htmlにpugテンプレートを使うためにHtmlWebpackPluginで設定しています。
resolve alias のところはこれが無いとvueがワーニングを出してくるのでいれます。
entryのapp.coffeeがルートになりDomLoad時に実行されます。
これでwebpackはbuildフォルダーの中にindex.htmlとbundle.jsを生成します。
launch/package.json
{
"name": "electron-test",
"main": "main.js"
}
Webpackが生成したファイルをelectronで実行するための設定です。
main.js では
...
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '../build/index.html'),
protocol: 'file:',
slashes: true
}))
...
build/index.htmlを読み込んでwindowを作っています。
これでcoffee script と vue js を使って electron app を作れます。
