2018年03月
"ENOENT: no such file or directory, rename ..."
"ENOENT: no such file or directory, rename ..." when running npm install · Issue #866 · mapbox/node-sqlite3 · GitHub
なるほどー、~/.npmrcにpackage-lock = falseを書いておくと、とりあえず回避できるんか。
[Electron] Hello World的なもの(3) パッケージング
パッケージングを行う。パッケージングを行うツールは、何種類かあるみたいだけど、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で、パッケージングできる。
変更したソースをダウンロードできるようにしといた。
Visual Studio Codeでエンターで候補が入力されてしまう
Visual Studio Codeで、プログラムコードじゃない普通のテキストを編集していると、スマホのかな漢字変換の予測変換のような前に入力した内容がポップアップメニューのようなものが表示される。
その状態で改行を入力しようとエンターを押すとその候補の頭が入力されてしまう。
と、いうのに今気づいた。
かなり鬱陶しい状態になっている・・・
ちょっと前までそんな動きじゃなかったような気がするんだが、気のせいか？
で、この挙動を切るには、設定に
"editor.acceptSuggestionOnEnter": "off",を追加するといい。ポップアップメニューのようなものの表示はされるが、エンターでその頭が入力されることはなくなる。逆に候補の頭を入力したい場合はTabキーを押せばできる。
ちなみに、プログラムコードを編集しているときの補完機能とかに影響しないかどうかは、まだ確認していない。
[React][TypeScript] Hello World的なもの(1)(更新！)
(更新！！)
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を追加した。
