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'
}
});
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
[3.1.2]
FAQs
Ember CLI Addon that can load AMD modules.
The npm package ember-cli-amd receives a total of 62 weekly downloads. As such, ember-cli-amd popularity was classified as not popular.
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
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.