Tüm statik dosyalarımı oluşturmak için Webpack + html-webpack-plugin kullanıyorum. Sorun şu ki, Google Haritalar API'sı ile kullanıyorum, işe yaramıyor. Sadece bu dosyayı çalıştırırsanız her şey iyi çalışır,Webpack Google Maps API ile nasıl kullanılır?
<!doctype html>
<html>
<head>
</head>
<body>
<div id="map"></div>
<script async="async" defer="defer"
src="https://maps.googleapis.com/maps/api/js?key=<token here>&callback=initMap">
</script>
<script src="script.js"></script>
</body>
</html>
:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
// the other code, irrelevant
}
Ve HTML dosyası:
Bu kodu vardır. Ama eğer bununla koşarsam, webpack 'initMap bir işlev değildir' ile ilgili şikayetler. Çıkışın içine baktım ve initMap'in global işlev olarak değil, bir modülün içindeki bir işlev ya da bunun gibi bir işlev olarak göründüğü görülüyor, bu yüzden sorun budur.
Google Haritalar API'sini webpack ile nasıl kullanmalıyım? Bazı lib'leri betiğimle reaksiyona sokabileceğimi biliyorum, aynısını yapmalı mıyım? Buradaki yaklaşım ne olmalı?
UPD: İşte benim webpack.config.js geçerli:
/* eslint-disable */
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const nodeModules = {}
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod
})
const htmlMinifierObj = {
collapseWhitespace: true,
removeComments: true
}
module.exports = [
// the first object compiles backend, I didn't post it since it's unrelated
{
name: 'clientside, output to ./public',
entry: {
script: [path.join(__dirname, 'clientside', 'script.js')]
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: { presets:['es2015', 'stage-0'] }
}
],
},
plugins: [
//new webpack.optimize.UglifyJsPlugin({minimize: true}),
new HtmlWebpackPlugin({
template: 'clientside/index.html',
inject: 'body',
chunks: ['script'],
minify: htmlMinifierObj
})
],
}]
Ve çıkış HTML (Ben WebPack tarafından eklenen çünkü benim kaynak dosyadan script.js ithal kaldırıldı ve minimize kapatmışsanız olduğunu sadece) okunabilirlik için:
yılında
<!doctype html>
<html>
<head>
</head>
<body>
<a href="/login/facebook">Login</a>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGSgj5Ts10UdapzUnWlr34NS5cuoBj7Wg&callback=initMap">
</script>
<script type="text/javascript" src="script.js"></script></body>
</html>
google maps API, web paketi ile harici paketi olarak saklamanız gereken bir web paketi ile "pack" yapmaz, eğer başarısız olursa, script.js paketlenmediğinden veya yeni paketlenmiş j'leri kullanmazsınız. Lütfen bize webpack yapılandırmanızı ve son html dosyanızı ( –
@DanyelDarkcloud) güncelleyin – serge1peshcoff