1はじめに
Webサイトが徐々に「インターネットアプリケーション」になるにつれて、Webページに埋め込まれるJavascriptコードはより大きく複雑になります。
Javascriptモジュラープログラミングが緊急の必要性になっています。理想的には、開発者はコアビジネスロジックを実装するだけでよく、他のすべてのものは他の人がすでに作成したモジュールをロードできます。ただし、Javascriptはモジュラープログラミング言語ではなく、「クラス」（クラス）、パッケージ（パッケージ）、「モジュール」（モジュール）などの概念をサポートしていません。
したがって、2つのモジュラー仕様が導入されました。
CommonJSモジュラー仕様ES6モジュラー仕様
2.CommonJS仕様
各ファイルはモジュールであり、独自のスコープがあります。ファイルで定義された変数、関数、およびクラスはすべてプライベートであり、他のファイルからは見えません。
CommonJSエクスポートを使用し、モジュールをエクスポートおよびインポートする必要があります
プロジェクト構造：
最初に作成し四则运算.js、ツールクラスとして使用し、4つのメソッドを定義してから、すべてのメソッドをエクスポートします
//四个方法
const sum = function (a, b) {
return a + b
}
const sub = function (a, b) {
return a - b
}
const mul = function (a, b) {
return a * b
}
const div = function (a, b) {
return a / b
}
//导出
// module.exports = {
// sum: sum,
// sub: sub,
// mul: mul,
// div: div
// }
//可简写成
module.exports = {
sum,
sub,
mul,
div
}
次にtest.js、上記のモジュールテストを作成して導入します
const fun = require('./四则运算.js');
console.log(fun.sum(1,2));
console.log(fun.sub(1,2));
console.log(fun.mul(1,2));
console.log(fun.div(1,2));
プログラムテストを実行する
3.ES6モジュラー仕様
ES6モジュールをエクスポートおよびインポートするには、エクスポートおよびインポートを使用します。
1つ書く
プロジェクト構造：
最初に作成し工具.js、2つのメソッドを定義およびエクスポートするツールクラスとして使用します
export function get(){
console.log("获取");
}
export function save(){
console.log("保存");
}
次に、を作成し工具.js、上記のメソッドをインポートしてテストするために使用します
//导入方法
import {
get,save} from './工具.js';
get();
save();
テストを実行します。エラーが報告されている
ことがわかりました。これは、nodejses6のimport構文がデフォルトでサポートされていないため、BabelES5構文に変換してから実行する必要があるためです。
プロジェクトをプロジェクトに初期化しnodejsます
npm init -y
.babelrc構成ファイルの書き込み
{
"presets": ["es2015"],
"plugins": []
}
次に、トランスコーダーをインストールし、プロジェクトにインストールします
npm install --save-dev babel-preset-es2015
あなたはトランスコードすることができますし、我々は、作成するsrcディレクトリをプロジェクトのルートにディレクトリに移動し、移動测试.jsと工具.jsにして、トランスコードに次のコマンドを入力します。
babel src -d dist
次に、新しいビルドを開いてdist/测试.jsテスト
を実行します。結果は正常に表示されます。
書き方2（推奨）
工具.js着替える：
export default {
get() {
console.log("获取");
},
save() {
console.log("保存");
}
}
测试.js着替える：
//以对象形式导入
import tool from './工具.js';
tool.get();
tool.save();
次に、同じトランスコーディングの実行を実行します