javascript - 为什么我的部分 javascript 代码没有正确运行？

Question

所以当我按下开始按钮时，我得到了这个输出

初始化1

这个错误

源映射错误：错误：无效 URL：webpack://Packs.[name]/webpack/bootstrap 资源 URL：http://0.0.0.0:3000/packs/js/application-50e3aceac3d862ba8b6d.js源 映射 URL：application- 50e3aceac3d862ba8b6d.js.map

"Init2"即使根据我的代码，我也必须得到"Init3"。

我的games.html.haml视图文件：

%h1 Catcher game
%p Catch bloks which are failling
%canvas#main_canvas
=button_tag "Start!", class: 'start_button', onclick: 'Packs.application.start'

文件中的我start()和init()函数chatcher.js：

function start() {
    console.log("Init3")
    var eater = new BigBlock(20, "pink");
    var smallBlocks = [];
    setInterval(function() { game(eater, smallBlocks); }, 1000/16);
    addEventListener("keydown", function(key) { eater.move(key) } ); 
}



window.init = function() {
    console.log("init2")
    var canvas = document.getElementById("main_canvas");
    var ctx = canvas.getContext("2d");
}

我的application.js档案

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

export * from '../packs/games/chatcher'

$(document).ready(function() {
    console.log("init1")
    window.init;
})

最后是我的config/webpack/environment.js

const { environment } = require('@rails/webpacker')

var webpack = require('webpack');
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment
environment.config.merge({
  output: {
    library: ['Packs', '[name]'],
    libraryTarget: 'var'
  },
})

感谢您的帮助。祝你今天过得愉快。

标签： javascriptruby-on-railswebpackhaml