更改JS文件的語法，以便它可以通過webpack裝載到另一個文件中

Question

我第一次在Laravel 5.4上使用webpack並且玩耍學習。

我有這個teal.js文件來自3d dice example。

"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重構，你可以嘗試一些髒象這樣：

下面"use strict"刪除：

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

並添加：

let teal = {} 

最後，在文件的最後添加：

module.exports = window.teal 

這是我能想到的最快的解決方案。 通過這種方式，您可以擺脫不存在的窗口對象，具體取決於您的環境，並將分配給teal對象的所有功能暴露給模塊導出。

也許我錯過了關於你的文件結構的東西，告訴我它是否無效。