2017-07-12 15 views
0

最近Webpackを使用して開始し、この問題を遭遇しました。私はモジュールとして関数をエクスポートする 'copyright.js'ファイルを持っています。 「index.js」ファイルでは「copyright.js」が必要です。「webpack.config.js」に「app.bundle.js」ファイルが出力されます。このファイルには、「getCopyright()」関数が表示されます。ビルド。webpackのmodule.exportsの後に変数が見つかりません

値を返すことができるように、htmlスクリプトタグの関数をどのように呼び出すことができますか?これまで私は '変数getCopyrightを見つけることができません'または 'copyright.getCopyright();'私は '変数の著作権を見つけることができません'というメッセージを受け取ります。

ありがとうございます。

copyright.js

module.exports.getCopyright = function(){ 
    var val = document.write(new Date().getFullYear()); 
    return val; 
} 

webpackconfig.js

module.exports = { 
    entry: { 
     app: './src/index.js', 
     filename1: './src/filename1.js', 
     filename2: './src/filename2.css' 
    }, 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     filename: '[name].bundle.js' 
    }, 

index.js

var copyright = require('./copyright'); 

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="app.bundle.js"></script> 
</head> 
    <body> 
    <div class="foot"> 
     <script>getCopyright();</script> 
    </div> 
    </body> 
</html> 

答えて

0

webpackのすべてがモジュールです。非モジュラーコードでもモジュールにパックされます。 var copyright(index.js)はグローバルスコープにはないため、スクリプトタグを実行するとcopyrightにアクセスできません。

もちろん行うことができます。

window.copyright = require('./copyright'); 

しかし、その後、私たちは背筋グローバルオブジェクトを使用することにあります。 (もちろん、他の人が含むべきWebライブラリを書いている場合は、ブラウザに何かを公開する必要があります。)

webpackでは、htmlのスクリプトをインライン化する方法があります絶対にしたいですが、良い解決策は、モジュールからスクリプトのタグ(グローバル環境を使用している)からではなく、あなたのものを実行することです。

ので(それはあなたが、それはすべての後に、エントリ・ポイントであることを宣言している理由である)あなたのindex.jsからあなたのコードを実行します。

let copyright = require('./copyright'); 
copyright.getCopyright(); 

(そして、ええ、(のdocument.writeを作るんこと)ちょっと逆効果です。

+0

あなたの答えとあなたの説明のためにippiありがとう!非常に役立ちます。 –

関連する問題