ember-cli-amd
Advanced tools
If your project needs to use an AMD based library, the Ember loader will conflict with the AMD loader.
The issue is that the Ember Loader defines the same globals require and define but are not AMD compatible.
The solution is to make the Ember Loader not conflicting anymore with the AMD Loader and to load the Ember App as an AMD module.
This addon will:
import Map from 'esri/Map';View it live using the ArcGIS API for JavaScript.
ember install ember-cli-amd
Update your ember-cli-build file. See configuration below as an example:
var app = new EmberApp({
amd : {
// Specify the loader path. Can be a CDN path or a relative path in the dist folder
// - CDN: loader: 'https://js.arcgis.com/4.14/'
// - Local: loader: 'assets/jsapi/init.js'
loader: 'https://js.arcgis.com/4.16/',
// AMD packages from which modules are imported from in your application.
// Used to parse the import statements and discover the AMD modules from the other modules.
packages: ['esri','dojo'],
// Optional: a list of relative paths from the build directory that should not be parsed by ember-cli-amd.
// This is useful for:
// - when using an AMD api locally and copied under public folder. The files will be copied under the build folder. These files are pure AMD
// modules and should not be converted.
// - when copying from public to build directory files that are pure JS or pure AMD
excludePaths: ['assets/jsapi', 'assets/myLibThatDontUseEmberDefineOrRequire'],
// Optional: the path to javascript file that will be created for loading the AMD modules
// default: assets
loadingFilePath: 'assets',
// Optional: Indicates if we should inject scripts directly into index.html, or if we should
// write them to separate js files that are loaded by index.html. When strict fingerprinting
// is required, this should be set to true, since there are scenarios where the generated
// amd-loading.js script will not get a unique fingerprint.
// default: false
inline: false,
}
});
Your ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
amd :{
loader: 'https://js.arcgis.com/4.16/',
packages: ['esri','dojo'],
excludePaths: ['assets/workers']
}
});
return app.toTree();
};
Your component:
import Component from '@glimmer/component';
import Map from 'esri/Map';
class MapComponent extends Component {
// Do something with Map: const map = new Map({});
}
Your original index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for "head"}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/myapp.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/myapp.js"></script>
{{content-for "body-footer"}}
</body>
</html>
The results will be:
dist/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/myapp.css">
</head>
<body>
<script src="https://jsdev.arcgis.com/4.15/init.js" data-amd="true"></script>
<script src="assets/amd-loading.js" data-amd-loading="true"></script>
</body>
</html>
dist/assets/amd-loading.js
require([
'esri/Map'
], function(mod0) {
var adoptables = [{
name: 'esri/Map',
obj: mod0
}];
var isVendor = new RegExp('vendor(.*js)');
function recursiveRequire(i, scripts) {
if (i >= scripts.length) {
return;
}
require([scripts[i]], function() {
if (isVendor.test(scripts[i])) {
adoptables.forEach(function(adoptable) {
enifed(adoptable.name, [], function() {
return adoptable.obj;
});
});
}
recursiveRequire(++i, scripts);
});
}
recursiveRequire(0, ["assets/vendor.js", "assets/nickel.js"]);
});
The version 3.x introduce the following breaking changes:
Find a bug or want to request a new feature? Please let us know by submitting an issue.
Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.
Copyright 2018 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's LICENSE file
FAQs
Ember CLI Addon that can load AMD modules.
We found that ember-cli-amd demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.