![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
最近、のJavaScriptモジュール以下のような文字列が入っていたりしてフリーズしますね。
var myModule = require('...');
何気に、Reactも書いてますが、JavaScriptやってる自覚がなかったりします（ES6ですし）。
最近はAMD(Asynchronous Module Definition)ではなく
CommonJS上でのモジュール化仕様
ES2015の仕様が策定されたことにより、
標準でモジュール化が可能となった。
ブラウザからモジュール化されていないJSを使用する。
<script src="XXXX.js"></script>
var util = require('ossc-test-library1');
...
util.sayAdd(1, 2); // 3
util.saySubtract(2, 1); //1
util.say // error. util.say is not a functionimport util from 'ossc-test-library1'; ... util.sayAdd(1, 2); // 3 util.saySubtract(2, 1); //1 util.say // error. util.say is not a function
define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
console.log(myModule.hello());
});
がある。
CommonJS派からもRequireJSに対抗してBrowserifyが生まれる。
npm init npm install webpack --save-dev
// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');
module.exports = {
// モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
mode: 'development',
// エントリーポイントの設定
entry: './www/scripts/index.js',
// 出力の設定
output: {
// 出力するファイル名
filename: 'bundle.js',
// 出力先のパス（絶対パスを指定する必要がある）
path: path.join(__dirname, 'www/scripts')
}
};'./www/scripts/index.js'
'www/scripts/bundle.js'
call webpack
CommonJSあるいはES2015 Moduleで定義。
exports.sayAdd = function(a, b) {
say(a + b);
}
exports.saySubtract = function(a, b) {
say(a - b);
}
say = function(word) {
console.log(word);
}var util = require('./util');
util.sayAdd(1, 2); // 3
util.saySubtract(2, 1); //1
util.say // error. util.say is not a function// コンストラクタ
var Movie = function(title) {
this.title = title;
}
Movie.prototype.sayTitle = function() {
say(this.title);
}
say = function(word) {
console.log(word);
}
module.exports = Movie;
・例２module.exports = function(title) {
this.title = title;
this.sayTitle = function() {
say(this.title);
}
}
function say(word) {
console.log(word);
}var Movie = require('./movie');
var movieA = new Movie('Star Wars');
movieA.sayTitle(); //Star Wars
var movieB = new Movie('Mad Max');
movieB.sayTitle(); // Mad Max
movieB.say(); // error. movieB.say is not a function従って、ここでは、named exports の例のみ紹介。
export function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888define([], function() {
return {
hello: function() {
console.log('hello');
},
goodbye: function() {
console.log('goodbye');
}
};
});
