JSファイルの構文を変更して、webpackで別のファイルに `require（）`することができます

Question

Laravel 5.4で初めてwebpackを使用して学習しています。

この3d dice exampleから届いたteal.jsファイルです。

"use strict"; 

window.teal = {}; 
window.$t = window.teal; 

teal.copyto = function(obj, res) { 
    if (obj == null || typeof obj !== 'object') return obj; 
    if (obj instanceof Array) { 
     for (var i = obj.length - 1; i >= 0; --i) 
      res[i] = $t.copy(obj[i]); 
    } 
    else { 
     for (var i in obj) { 
      if (obj.hasOwnProperty(i)) 
       res[i] = $t.copy(obj[i]); 
     } 
    } 
    return res; 
}; 

teal.copy = function(obj) { 
    if (!obj) return obj; 
    return teal.copyto(obj, new obj.constructor()); 
}; 

teal.element = function(name, props, place) { 
    var dom = document.createElement(name); 
    if (props) for (var i in props) dom.setAttribute(i, props[i]); 
    if (place) place.appendChild(dom); 
    return dom; 
}; 
.... MANY MORE 

js bootstrapにファイルを含めることができます。

window.teal = require(./dice/teal); 

これは機能しません。最初はwebpackで、ファイルは連結されたgulpから来ています。私はスコープとwebpackについてすべて学んでいます。

構文の点で何がないので、私にはteal.jsが必要ですか？

js bootstrapコードは次のとおりです。

window.teal = require('./dice/teal');    <-- problem 
window.CANNON = require('./dice/cannon.min');  <-- ok 
window.THREE = require('./dice/three.min');  <-- ok 
window.dice = require('./dice/dice');    <-- ok 

Answer 1

あなたはそれがリファクタリングbeeingてなくて、あなたがこのように汚れた何かを試みることができる、それが仕事をしたい場合：

window.teal = {}; 
window.$t = window.teal; 

：

削除"use strict"以下

と追加：

let teal = {} 

最後に、ファイルの末尾に追加します。

module.exports = window.teal 

これは私が考える可能性が最速のソリューションです。 この方法では、環境に応じて存在しないウィンドウオブジェクトを取り除き、tealオブジェクトに割り当てられているすべての関数をモジュールの書き出しに公開します。

多分私はあなたのファイルの構造について何かを忘れていました。