前々からTypeScriptの型定義ファイル(のモジュール？)って--save-dev(-D)オプションを付けてpackage.jsonのdevDependenciesに記録するんじゃなかろーかと思っているんだが、いろんなページ見ていると--save(-S)でpackage.jsonに記録しているんだよねー。
で、MicrosoftのVisual Studio Codeで多分使っているだろーと思って、公開されているpackage.jsonを見てみると、devDependenciesに記録されているんだよね。やっぱり、--save-dev(-D)を付けるので正解のようだ。(たぶん)
パッケージングを行う。パッケージングを行うツールは、何種類かあるみたいだけど、electron-packagerを使うことにする。
[Electron] Hello World的なもの(2) index.htmlの置き場所を変える。からダウンロードできるソースに対して行っていく。
プロジェクトのフォルダでelectron-packagerをインストールする。
npm install electron-packager -Dnpm run build:prodでビルド後、
npx electron-packager dist --overwriteって、やると実行したOS用のパッケージングが行われる。distはビルド後作成されるフォルダで、その中のファイルをパッケージングする。
32bitのWindows上で実行すると、webpack-electron-win32-ia32フォルダに作成される。このフォルダ名とexeのファイル名のwebpack-electronは、distフォルダにあるpackage.jsonのnameに書いてあるものが使用されている。
macOS用は、
npx electron-packager dist --platform=darwin --arch=x64 --overwrite64bitのWindows用は、
npx electron-packager dist --platform=win32 --arch=x64 --overwriteで、x64のLinux用は、
npx electron-packager dist --platform=linux --arch=x64 --overwriteで作れる。
ただし、Windows上で作ったmacOSのファイルたちをmacOSに持って行っても動かなかったんだよねー。詳しくは調べていないんでなんで動かないのかはわからん。実行権とかなんかの問題なんかな？
Linux、macOS上でWindows用のパッケージングを行うには、Wineをインストールする必要があるようだ。(試してない)
package.jsonのscriptsに
"package": "electron-packager dist --overwrite"を追加しておくと、
npm run packageで、パッケージングできる。
変更したソースをダウンロードできるようにしといた。
(更新！！)
webpack4にあわせて変更。
-------
最初、webpackを使わずに試してみようと思ったが面倒くさくなってきたので、最新版で学ぶwebpack 4入門を参考にビルド環境を用意した。
こっちにもざっくりと準備することを書いておく。
npm init -yでpackage.jsonを用意する。
npm install webpack webpack-cli -Dでモジュールのインストールする。
package.jsonのscriptsのところを
"scripts": {
"build": "webpack --mode development",
"build:prod": "webpack --mode production"
},に変更する。
これで
npm run buildとすると、とりあえずsrc/index.jsとindex.js内でimportしているモジュールをまとめてdist/main.jsを作ってくれる。
webpackのオプションに--mode developmentを指定すると、開発用のソースマップ有効のjsファイルが作られて、--mode productionで公開用の圧縮(?)されたjsが作られる。
次にtypescriptを使えるようにする。
まずは、モジュールのインストール。
npm install typescript ts-loader -Dtsc --initでtsconfig.jsonを作る。
tsconfig.jsonのcompilerOptionに次のオプションを変更or追加する。
"sourceMap": true,
"target": "es5",
"module": "es2015"webpackの設定ファイル(webpack.config.js)を用意する。
module.exports = {
entry: "./src/index.ts",
output: {
path:`${__dirname}/dist`,
filename: "main.js"
},
module: {
rules: [
{
// 拡張子 .ts の場合
test: /\.ts$/,
// TypeScript をコンパイルする
use: "ts-loader"
}
]
},
// import 文で .ts ファイルを解決するため
resolve: {
extensions: [
".ts"
]
}
};src/index.tsとindex.ts内でimportしているモジュールをjsにコンパイルしたて、まとめてdist/main.jsを作ってくれる。
次にReactを使えるようにする。
Reactのモジュールをインストール。
npm install react react-dom @types/react @types/react-dom -Stsconfig.jsonに次の項目を追加or変更する。
"jsx": "react",
"moduleResolution": "node",
"lib": [
"es2017",
"dom"
]ReactのサイトにあるHello Worldみたいなもののindex.htmlとsrc/index.tsxを用意する。
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="dist/app.js"></script>
</body>
</html>src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);webpackの設定ファイル(webpack.config.js)を変更する。まるっと、上げておく。
module.exports = {
entry: "./src/index.tsx",
output: {
path:`${__dirname}/dist`,
filename: "app.js"
},
module: {
rules: [
{
// 拡張子 .tsもしくは.tsx の場合
test: /\.tsx?$/,
// TypeScript をコンパイルする
use: "ts-loader"
}
]
},
// import 文で .ts ファイルを解決するため
resolve: {
extensions: [
".ts", ".tsx", ".js", ".json"
]
}
};npm run buildでビルド、index.htmlをブラウザで開けば、Hello world!って表示される。
ソースをダウンロードできるようにしといた。
(追記 2018/3/22)
package.jsonのscriptsにbuild:prodを追加した。
[Electron] Hello World的なもの(1)を少し変更する。
index.htmlをsrcフォルダに移動して、ビルドするとdistにコピーされるようにしたい。つまり、srcフォルダにすべてのソース、ビルドで生成されるファイル+実行に必要なファイルをdistに用意されるようになる。と、すると実行用のpackage.jsonも別途srcフォルダに用意しといた方がいいような気がするのでそれも行う。
webpackでビルド時にファイルをコピーする方法はいろいろあるようなんだけど、copy-webpack-pluginを使うことにする。
copy-webpack-pluginをインストールする。プロジェクトフォルダで
npm install copy-webpack-plugin -Dを実行する。
webpack.config.jsの頭のほうに、
const copyWebpackPlugin = require('copy-webpack-plugin');を追加して、レンダラープロセスの設定に
plugins: [
new copyWebpackPlugin([
{ from: "./src/*.html", to:"[name].[ext]" },
{ from: "./src/package.json" },
])
] を追加する。
index.htmlをsrcフォルダに移動する。
index.htmlでdist/app.jsと指定しているところをapp.jsに変更する。
src/main/main/tsのloadURLで読み込んでいるindex.htmlの場所を変更する。
package.jsonのscriptsのstartを
"start": "electron ./dist/"起動用のsrc/package.jsonを用意する。
{
"name": "webpack-electron",
"version": "1.0.0",
"main": "./main.js"
}こんな感じかな？
変更したソースをダウンロードできるようにしといた。
