34358


以下のようなjavascriptファイルを読み込んで  
<https://github.com/pekochun/test/blob/master/public/javascripts/bundle.js>

その中に書かれているgame_init()関数を以下のhtmlファイルのbody onloadから実行したいです。  
<https://github.com/pekochun/test/blob/master/test.html>

どうすれば実行することが出来ますか？  
Webpackを使ってビルドしたため、Javascriptが少し複雑になっています。


CC BY-SA 3.0
2017-04-28T11:34:12.490
34354
2017-04-29T01:18:41.810
22541
question
javascript html
htmlのbody onloadでjavascriptの関数を実行する方法


game_init自身かそれを呼び出す関数をloadイベントのコールバックとして登録するといいと思います。  
当然ファイルが分かれているのでしたらそのgame_initが定義されているファイルをimportする必要があります。

以下に一例を置いておきます。

ファイル

[code]

    tree -L 1
    .
    ├── bundle.js
    ├── index.html
    ├── main.js
    ├── node_modules
    ├── package.json
    ├── sub.js
    └── webpack.config.js
    
[/code]

main.js

[code]

    import testFunc from './sub';
    
    document.addEventListener('DOMContentLoaded', testFunc);
    
[/code]

sub.js

[code]

    export default function testFunc() {
      console.log('test');
    }
    
[/code]

index.html

[code]

    <script src="bundle.js"></script>
    
[/code]

* * *

追記

コメントを見ました。  
まずbootstrapをjavascriptから読み込まれているようですがhtml内でも読み込んでいます。  
カスタムするわけでないのでしたらhtmlのlinkタグで読んだほうが楽ですし、もしかしたらcdnのキャッシュで早くなるかもしれません。  
webpackでモジュールにわけられたものを合体ということについてですがモジュールに分けるのは一つはスコープに閉じ込めるという利点があってやります。game_initが定義されていないというようなエラーがでてたかもしれませんがこれはモジュールに閉じ込めているのででます。なのでimportしたところで使う必要があります。

コードはところどころ読みかえてみて下さい。expressを使っていると仮定して書いています。  
こちらの環境で試したところ最初の画面にはたどり着けていました。

webpack.config.js  
var webpack = require('webpack');

[code]

    module.exports = {
      entry: './app.js',
      output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
      },
      plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            jquery: 'jquery',
            $: 'jquery'
        })
      ]
    };
    
[/code]

index.js

[code]

    var express = require('express');
    var app = express();
    
    app.set('view engine', 'jade');
    app.set('views', __dirname + '/view');
    
    app.use('/assets', express.static('dist'));
    
    app.get('/', function(req, res) {
      res.render('index');
    });
    
    app.listen(8080);
    
[/code]

app.js

[code]

    document.body.addEventListener('load', game_init);
    
[/code]

index.jade

[code]

      body
        script(src="assets/bundle.js")
    
[/code]

bodyのloadイベントということだったのでaddEventListnerを使うために位置を動かしました。


CC BY-SA 3.0
2017-04-28T13:05:15.243
34358
2017-04-29T01:18:41.810
2017-04-29T01:18:41.810
14222
14222
34354
answer