Saya menggunakan ArcGIS JSAPI 4.12 dan ingin menggunakan Spatial Illusions untuk menggambar simbol militer di peta.
Ketika saya menambahkan milsymbol.js
ke skrip, konsol mengembalikan kesalahan
Uncaught SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul`
jadi saya tambahkan type="module"
ke skrip, dan kemudian kembali
ReferenceError yang tidak tertangkap: ms tidak ditentukan
Ini kode saya:
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer"
], function (Map, MapView, MapImageLayer, FeatureLayer) {
var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [121, 23],
zoom: 7
});
});
</script>
Jadi, apakah saya menambah type="module"
atau tidak, selalu ada kesalahan. Namun, dalam dokumen resmi Spatial Illusions, tidak ada type="module"
dalam skrip ini. Saya sekarang benar-benar bingung. Bagaimana cara mereka membuatnya berfungsi tanpa menambahkan tipe?
File milsymbol.js
import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;
export { ms };
javascript
ecmascript-6
arcgis
arcgis-js-api
Jerry Chen
sumber
sumber
require()
. Lihat videoJawaban:
Saya mendapatkan kesalahan ini karena saya lupa type = "module" di dalam tag script:
sumber
Sepertinya penyebab kesalahan adalah:
1) Saat ini Anda sedang memuat file sumber di
src
direktori alih-alih file yang dibangun didist
direktori (Anda dapat melihat apa file yang dimaksud didistribusikan di sini ). Ini berarti bahwa Anda menggunakan kode sumber asli dalam / negara tidak mengikat berubah, mengarah ke kesalahan berikut:Uncaught SyntaxError: Cannot use import statement outside a module
. Ini harus diperbaiki dengan menggunakan versi paket karena paket menggunakan rollup untuk membuat bundel.2) Alasan Anda mendapatkan
Uncaught ReferenceError: ms is not defined
kesalahan adalah karena modul dicakup, dan karena Anda memuat pustaka menggunakan modul asli,ms
tidak berada dalam lingkup global dan karenanya tidak dapat diakses dalam tag skrip berikut.Sepertinya Anda harus dapat memuat
dist
versi file ini untukms
didefinisikan padawindow
. Lihat contoh ini dari penulis perpustakaan untuk melihat contoh bagaimana ini bisa dilakukan.sumber
require
membuat paket langsung ke dalam kode Anda.<script src="node_modules/milsymbol/dist/milsymbol.js"></script>
tetapi konsol masih kembaliUncaught ReferenceError: ms is not defined
. Masalahnyams
tidak didefinisikan dalamdist/milsymbol.js
, itu didefinisikan dalamsrc/milsymbol.js
, tetapi membutuhkantype="module"
dan akan menyebabkan masalah ruang lingkup. Apakah ada solusi untuk ini? Terima kasih banyak!Saya memecahkan masalah ini dengan melakukan hal berikut:
Saat menggunakan modul ECMAScript 6 dari browser, gunakan ekstensi .js di file Anda dan pada tag tambahan
type = "module"
.Saat menggunakan modul ECMAScript 6 dari lingkungan Node.js, gunakan ekstensi
.mjs
dalam file Anda dan gunakan perintah ini untuk menjalankan file:sumber
Saya juga menghadapi masalah yang sama sampai saya menambahkan type = "module" ke skrip. Sebelumnya seperti ini
Dan setelah mengubahnya menjadi
Itu bekerja dengan sempurna
sumber
Kesalahan dipicu karena file yang Anda tautkan dalam file HTML Anda adalah versi file yang tidak diikat. Untuk mendapatkan versi paket lengkap Anda harus menginstalnya dengan
npm
:Ini mengunduh paket lengkap ke
node_modules
folder Anda .Anda kemudian dapat mengakses file JavaScript yang diperkecil mandiri di
node_modules/milsymbol/dist/milsymbol.js
Anda dapat melakukan ini di direktori mana saja, dan kemudian cukup salin file di bawah ini ke
/src
direktori Anda .sumber
--save
Sudah default sejaknpm 5
&node 8
(2017): stackoverflow.com/q/36022926/1821548 , nodejs.dev/npm-dependencies-and-devdependencies , github.com/benmosher/eslint-plugin-import/issues/884 , auth0. com / blog / whats-new-in-node8-and-npm5Cukup tambahkan
.pack
antara nama dan ekstensi di<script>
tag di src. yaitu:sumber