はじめに
jsのライブラリを作成しようと思い、イマドキの開発環境構築をしようとbabel7とwebpack４で環境構築した話です。
開発環境
windows10でもろもろのインストールはPowerShell経由でコマンド実行してます。
環境構築
下準備
まず、npm initして、package.jsonを準備します。
次に、babelとwebpackのモジュールをインストールします。
最新版で学ぶwebpack 4入門 - Babel 7でES2018環境の構築（React, Vue, Three.js, jQueryのサンプル付き）
こちらのページを参考にさせていただきました。
npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env
次に、webpack.config.jsを準備します。
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
}
]
}
]
}
};
次に、package.jsonにbuildコマンドを追加します。
・・・
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
},
・・・
これで、npm run buildするとwebpackコマンドが実行されます。
webpackを直接打ってもいいです。
最後に、コンパイルする処理を書きます。
export default class {
constructor (x) {
this.x = x;
}
testFunction = () => {
console.log(this.x);
}
}
エラーと戦う
npm run buildします。で、以下エラーがでます。
Support for the experimental syntax 'classProperties' isn't currently enabled
よくよく調べると、babelのgithubに同様のエラーについてのisuueがありました。
ここに書いてある解決策は、@babel/plugin-proposal-class-propertiesをインストールすればエラーがでなくなるとのことだったので、インストールします。
npm install -D @babel/plugin-proposal-class-properties
再度、コンパイルをすると、無事エラーがなくなりました。
ライブラリ化する
元々の目的がライブラリを作成することなので、ライブラリ化します。
以下ページを参考にさせていただきました。
Webpackでライブラリを作る
ライブラリ化するためにpackage.jsonにoutput項目を追記します。
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
library: "Test",
libraryTarget: "umd"
}
module: {
rules: [
・・・
]
}
};
次にコンパイルして、ブラウザに読み込ませます。
var test = new Test('a');
こんな感じでインスタンスを作成してみたんですが、エラーがでます。
Uncaught TypeError: Test is not a constructor
調べた結果、webpackでライブラリ化した場合、このpackage.jsonの記述だと、
Testという名前のクラスが作成されず、Test.defaultという名前で作成されることがわかりました。
なので、
var test = new Test.default('a');
test.testFunction();
=> a
こんな感じでインスタンスを作成するとうまくいきます。
ただ、defalutを付けたくなかったので、それをなくす設定をpackage.jsonに追記しました。
以下ページに詳細が記載されています。
Ability to export only module's default when building a library #3929
・・・
output: {
library: "Test",
libraryExport: "default",
libraryTarget: "umd"
}
・・・
これでコンパイルしてやると、
var test = new Test('a');
test.testFunction();
=> a
無事defalutなしでインスタンスを作成することができました。
最後に
今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。
【実況】babel7+webpack4でライブラリ開発環境構築
えんじにぁ〜TV