Posted at

jsライブラリを作成するためにbabel7+webpack4で環境構築


はじめに

jsのライブラリを作成しようと思い、イマドキの開発環境構築をしようとbabel7とwebpack4で環境構築した話です。


開発環境

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を準備します。


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.jsonbuildコマンドを追加します。


package.json

・・・

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
},
・・・

これで、npm run buildするとwebpackコマンドが実行されます。

webpackを直接打ってもいいです。

最後に、コンパイルする処理を書きます。


index.js

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がありました。

Compilation error "Support for the experimental syntax 'classProperties' isn't currently enabled" despite having the plugin installed when using linked packages #8667

ここに書いてある解決策は、@babel/plugin-proposal-class-propertiesをインストールすればエラーがでなくなるとのことだったので、インストールします。

npm install -D @babel/plugin-proposal-class-properties

再度、コンパイルをすると、無事エラーがなくなりました。


ライブラリ化する

元々の目的がライブラリを作成することなので、ライブラリ化します。

以下ページを参考にさせていただきました。

Webpackでライブラリを作る

ライブラリ化するためにpackage.jsonoutput項目を追記します。


package.json

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


package.json

・・・

output: {
library: "Test",
libraryExport: "default",
libraryTarget: "umd"
}
・・・

これでコンパイルしてやると、

var test = new Test('a');

test.testFunction();
=> a

無事defalutなしでインスタンスを作成することができました。


最後に

今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。

【実況】babel7+webpack4でライブラリ開発環境構築

えんじにぁ〜TV