GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → tomwayson → esri-webpack-babel

tomwayson / esri-webpack-babel

Licence: MIT license
A bare bones example showing how to use the ArcGIS API for JavaScript in an application built with webpack and Babel to compile ES2015 modules.

Labels

babelwebpackwebpack-configurationarcgis-js

Projects that are alternatives of or similar to esri-webpack-babel

Serverless Webpack
Serverless plugin to bundle your lambdas with Webpack
Stars: ✭ 1,595 (+8761.11%)
Mutual labels:  webpack-configuration
Wpk
a friendly, intuitive & intelligent CLI for webpack
Stars: ✭ 232 (+1188.89%)
Mutual labels:  webpack-configuration
vscode-exts
Visual Studio Code Extensions
Stars: ✭ 33 (+83.33%)
Mutual labels:  webpack-configuration
Sharejs
💻js小技巧、react、webpack、redux、javascript及其它前端干货，持续更新ing
Stars: ✭ 141 (+683.33%)
Mutual labels:  webpack-configuration
Gulp Webpack Starter
Gulp Webpack Starter - fast static website builder. The starter uses gulp toolkit and webpack bundler. Download to get an awesome development experience!
Stars: ✭ 199 (+1005.56%)
Mutual labels:  webpack-configuration
Frontend Webpack Boilerplate
Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.
Stars: ✭ 242 (+1244.44%)
Mutual labels:  webpack-configuration
Angular Librarian
An Angular 2+ scaffolding setup for creating libraries
Stars: ✭ 92 (+411.11%)
Mutual labels:  webpack-configuration
webpack-recipes
🆘 A collection of webpack configurations
Stars: ✭ 46 (+155.56%)
Mutual labels:  webpack-configuration
Webpack Chain
A chaining API to generate and simplify the modification of Webpack configurations.
Stars: ✭ 2,821 (+15572.22%)
Mutual labels:  webpack-configuration
plebpack
Webpack configuration for the common people.
Stars: ✭ 13 (-27.78%)
Mutual labels:  webpack-configuration
React Webpack4 Cook
💯The most powerful webpack4 tutorial in the universe
Stars: ✭ 152 (+744.44%)
Mutual labels:  webpack-configuration
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (+850%)
Mutual labels:  webpack-configuration
chunks-webpack-plugin
Create HTML files with entrypoints and chunks relations to serve your bundles
Stars: ✭ 22 (+22.22%)
Mutual labels:  webpack-configuration
Preact Minimal
🚀 Minimal preact structure
Stars: ✭ 136 (+655.56%)
Mutual labels:  webpack-configuration
webpack-config
Webpack 5 configuration for static projects...
Stars: ✭ 96 (+433.33%)
Mutual labels:  webpack-configuration
Webpack Core Usage
webpack2完整系列课程，欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (+422.22%)
Mutual labels:  webpack-configuration
Webpack Config
Helps to load, extend and merge webpack configs
Stars: ✭ 244 (+1255.56%)
Mutual labels:  webpack-configuration
django-manifest-loader
Simplifies webpack configuration with Django
Stars: ✭ 105 (+483.33%)
Mutual labels:  webpack-configuration
awesome-arcgis
La mayor recopilación (Wiki) de recursos sobre ArcGIS que encontrarás (organizado por productos, conceptos, ...)
Stars: ✭ 21 (+16.67%)
Mutual labels:  arcgis-js
webpack-mix
Elegant wrapper around Webpack for more than 80% use cases.
Stars: ✭ 51 (+183.33%)
Mutual labels:  webpack-configuration
View All Similar Projects ➔

esri-webpack-babel

UPDATE: This technique demonstrated in this repository will work, but you should probably use either:

Read this blog post for more information.

A bare bones example showing how to use the ArcGIS API for JavaScript in an application built with webpack and Babel to compile ES2015 modules.

Bundles application code via webpack, while pulling in the ArcGIS API for JavaScript (and Dojo) via CDN.

Running the demo

npm install
npm run build

Then serve the root folder using your favorite web server, such as http-server and open src/app/index.html in a browser.

How it works

The approach demonstrated here uses webpack to bundle your application code, but loads the ArcGIS API for JavaScript from a pre-build distribution. The key steps are to:

  1. configure webpack to output the bundle as an AMD module
  2. exclude Esri and Dojo modules from the local build
  3. load the ArcGIS API for JavaScript via a script tag (in this case from the CDN)
  4. use the Dojo loader that is included in the ArcGIS API for JavaScript to load webpack's bundled output via a require() statement

After you've taken these steps you will be able to use ES2015 import statements like import Map from 'esri/map'; to reference Esri modules.

This repository uses v3.x of the ArcGIS API for JavaScript, but the same technique works just as well with v4.x.

Integrating with other libraries

Non-Dojo lbraries

For any non-Dojo libraries (jQuery, d3, etc) you can include them in your webpack bundles as you normally would.

Dojo lbraries

For Dojo libraries you will need to take a few additional steps:

  1. configure the Dojo loader with the location of the package
  2. exclude the package from the local build

Known limitations of this approach

Since the entire application is being loaded via the ArcGIS API for JavaScript, you cannot lazy load it and must incur the cost of downloading that script before users can interact with your app.

Also, this approach is not yet working with angular-cli.

If either of those are requirements for your application, you can try the approach demonstrated in esri-angular-cli-example.

Why is this needed?

This blog post explains how libraries like this provide a workaround to the challenges of loading ArcGIS API for JavaScript modules from bundlers like webpack.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].