モジュールとは
部品と近い意味ですね。
大きなファイルを機能ごととか、役割ごととかで細分化する。
細分化したものを組み合わせて一つのものにする。
モジュールのメリット
・重複命名防止
・コード再利用可能
・保守しやすい
モジュールの文法
export
モジュールをエクスポートする
import
モジュールをインポートする
エクスポートの方法
主に三つに分けられる。
1.個別エクスポート
2.一括エクスポート
3.デフォルトエクスポート
個別エクスポート
エクスポートしようと思う データの前に、「export」を加えること。
individualExport.js
export let language = "JavaScript";
export function output(){
console.log("I'am from individualExport.js file!! ");
}
一括エクスポート
export{ // エクスポートしようと思うデータ}
batchExport.js
let language = "React";
function output(){
console.log("I'am from batchExport.js file!! ");
}
export {language,output}
デフォルトエクスポート
export defaultを使用して、エクスポートする。
出力したdefaultのは、object型
defaultExport.js
export default{
language : "Jquery",
change : function(){
console.log("I'am from defaultExport.js file!!");
}
}
インポートの方法
1.全部インポート
2.分割代入
3.リネーム代入
4.別名でデフォルトインポート
import.js
//1.全部インポート
import * as i from "individualExport.js";
import * as b from "batchExport.js";
import * as d from "defaultExport.js";
/*********************************************************************
要注意：defaultの場合、戻り値はオブジェクト型のため、
オブジェクト中のものを呼び出すときには、普通のオブジェクト型と同じ扱いしないといけない。
*********************************************************************/
d.default.change() //I'am from defaultExport.js file!!
//2.分割代入
import {language,output} from "individualExport.js";
//3.リネーム代入
import {language as language2 ,output as output2} from "batchExport.js";
//4.別名でデフォルトインポート
import {default as one} from "defaulExport.js";
他のモジュール導入方法
モジュールをapp.jsに集約して、HTMLファイルで app.jsをインポートする。
app.js
import * as i from "individualExport.js";
import * as b from "batchExport.js";
import * as d from "defaultExport.js";
forImport.html
<html>
<head>
<meta charset="utf-8">
<title>モジュールインポート</title>
</head>
<body>
<script src="./js/app.js" type="module"></script>
</body>
</html>
おまけ
一部のブラウザ(*)はまだES6以上の仕様に対応していないので、最新の書き方で書いたJavaScriptを反映できない。
そこで、Babelを使って、ES5に変換してもらえる。
*https://kangax.github.io/compat-table/es6/
インストール
npm i babel-cli babel-preset-env browserify
babelで変換
npx babel js（変換前のjsフォルダパース） -d dist/js（変換前のjsフォルダパース） --presets=babel-preset-env
バンドル
npx browserify ./js/app.js -o dist/bundle.js
インポート
<script src="./js/bundle.js" type="module"> </script>