More than 1 year has passed since last update.

【JavaScript】ES6　モジュールのエクスポート&インポート、およびbabelのインストール方法

JavaScript

Last updated at 2022-01-16Posted at 2022-01-16

##モジュールとは
部品と近い意味ですね。

大きなファイルを機能ごととか、役割ごととかで細分化する。
細分化したものを組み合わせて一つのものにする。

###モジュールのメリット
・重複命名防止
・コード再利用可能
・保守しやすい

###モジュールの文法
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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【JavaScript】ES6 モジュールのエクスポート&インポート、およびbabelのインストール方法

【JavaScript】ES6　モジュールのエクスポート&インポート、およびbabelのインストール方法