導入我自己的庫：未捕獲ReferenceError：未定義mylib

我正試圖學習如何編寫一個小型庫來導入我的項目。我正在使用Webpack進行捆綁。導入我自己的庫：未捕獲ReferenceError：未定義mylib

一切都很好，直到我嘗試創建我的類的新實例：

Uncaught ReferenceError: mylib is not defined

我的圖書館：

class mylib { 
    constructor(input) { 
    this.sayHello(input) 
    } 

    sayHello(name) { 
    console.log('Hello ' + name); 
    } 
}

的WebPack配置：

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    filename: './mylib.js', 
    path: __dirname + '/dist' 
    }, 
    resolve: { 
    extensions: [".js"] 
    } 
};

的Index.html：

<script type="text/javascript" src="dist/mylib.js"></script> 
<script> 
    (function() { 
    var test = new mylib('myname'); 
    })(); 
</script> 
<body> 
<pre>...</pre> 
</body>

我已經試過幾乎所有我能想到的是能夠使用該庫在其他地方，但沒有什麼幫助...

我在哪裏做錯了？

來源

2017-07-19 mottosson

使用webpack時，必須使用導入/導出來使用庫中的類。一個類不能全局訪問（至少不是默認的）。

如果你想在全球範圍內，無論如何使用這個類，你應該增加這樣的事情您的WebPack配置：（上https://webpack.github.io/docs/library-and-externals.html可見）

output: { 
    // export itself to a global var 
    libraryTarget: "var", 
    // name of the global var: "mylib" 
    library: "mylib" 
}

不過，我會建議在另一個文件導入lib或項目，在其中使用webpack而不是將其寫入HTML文件本身。

無論哪種方式，不要忘了出口默認添加到您的index.js文件：

export default mylib;

來源

2017-07-19 20:56:17 dejakob

導入我自己的庫：未捕獲ReferenceError：未定義mylib

回答

相關問題