├── .gitignore ├── src ├── app │ ├── main.ts │ ├── myClass.ts │ └── index.ejs └── test │ └── spec │ ├── tests.webpack.js │ ├── myClassSpec.ts │ └── test-main.js ├── tsconfig.json ├── typings.json ├── readme.md ├── karma.webpack.config.js ├── LICENSE ├── package.json ├── webpack.config.js └── karma.conf.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | typings/ 3 | dist/ 4 | -------------------------------------------------------------------------------- /src/app/main.ts: -------------------------------------------------------------------------------- 1 | import Map = require("esri/map"); 2 | 3 | const map = new Map("content", {basemap: "streets"}); 4 | 5 | -------------------------------------------------------------------------------- /src/test/spec/tests.webpack.js: -------------------------------------------------------------------------------- 1 | var testsContext = require.context(".", true, /\.ts$/); 2 | testsContext.keys().forEach(testsContext); -------------------------------------------------------------------------------- /src/app/myClass.ts: -------------------------------------------------------------------------------- 1 | import Graphic = require("esri/graphic"); 2 | 3 | export class MyClass { 4 | constructor(public someProperty: string) { 5 | const graphic = new Graphic(); 6 | } 7 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "amd", 4 | "noImplicitAny": true, 5 | "target": "ES5", 6 | "jsx": "react", 7 | "sourceMap": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/test/spec/myClassSpec.ts: -------------------------------------------------------------------------------- 1 | import {MyClass} from '../../app/myClass'; 2 | 3 | describe("My Class", () => { 4 | it("Can be instantiated", () => { 5 | const myClass = new MyClass("someProp"); 6 | expect(myClass).toEqual(jasmine.any(MyClass)); 7 | }); 8 | }); -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "esri-webpack", 3 | "version": false, 4 | "globalDependencies": { 5 | "arcgis-js-api": "github:Esri/jsapi-resources/3.x/typescript/arcgis-js-api.d.ts", 6 | "dojo": "registry:dt/dojo#1.9.0+20160521151917" 7 | }, 8 | "globalDevDependencies": { 9 | "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#9f0f926a12026287b5a4a229e5672c01e7549313", 10 | "jasmine-ajax": "github:DefinitelyTyped/DefinitelyTyped/jasmine-ajax/jasmine-ajax.d.ts#9f0f926a12026287b5a4a229e5672c01e7549313" 11 | }, 12 | "dependencies": {} 13 | } 14 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # esri-webpack-typescript 2 | 3 | **UPDATE**: This technique demonstrated in this repository will work, but you should probably use either: 4 | - the newer [@arcgis/webpack-plugin](https://github.com/Esri/arcgis-webpack-plugin) with the ArcGIS API v4.7+ 5 | - or [esri-loader](https://github.com/Esri/esri-loader/) with the ArcGIS API v3.x - v4.6 6 | 7 | Read this [blog post](https://community.esri.com/people/TWayson-esristaff/blog/2018/05/10/arcgiswebpack-plugin-vs-esri-loader) for more information. 8 | 9 | ESRI JSAPI with Webpack demo, using TypeScript 10 | 11 | Generates separate app and vendor bundles via webpack, while pulling in the ESRI JSAPI and dojo via CDN. 12 | 13 | Uses TypeScript compiler and test setup using karma. 14 | 15 | ``` 16 | npm install 17 | npm start 18 | npm test 19 | ``` 20 | -------------------------------------------------------------------------------- /src/app/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | esri-webpack-demo 6 | 7 | 15 | 16 | 17 | 18 |
19 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /src/test/spec/test-main.js: -------------------------------------------------------------------------------- 1 | var tests = []; 2 | for (var file in window.__karma__.files) { 3 | if (window.__karma__.files.hasOwnProperty(file)) { 4 | if (/tests.webpack\.js$/.test(file)) { 5 | tests.push(file); 6 | } 7 | } 8 | } 9 | 10 | window.dojoConfig = { 11 | packages: [ 12 | { name: "local", location: "/base"}, 13 | { name: "esri", location: "http://js.arcgis.com/3.16/esri"}, 14 | { name: "dojo", location: "http://js.arcgis.com/3.16/dojo" }, 15 | { name: "dojox", location: "http://js.arcgis.com/3.16/dojox" } 16 | ], 17 | async: true 18 | }; 19 | 20 | 21 | /** 22 | * This function must be defined and is called back by the dojo adapter 23 | * @returns {string} a list of dojo spec/test modules to register with your testing framework 24 | */ 25 | window.__karma__.dojoStart = function(){ 26 | return tests; 27 | }; 28 | -------------------------------------------------------------------------------- /karma.webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: {}, 5 | output: { 6 | filename: './src/test/[name].bundle.js', 7 | publicPath: './', 8 | libraryTarget: 'amd' 9 | }, 10 | resolve: { 11 | extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.tsx?$/, 17 | use: [ 18 | 'ts-loader' 19 | ] 20 | } 21 | ] 22 | }, 23 | externals: [ 24 | function (context, request, callback) { 25 | if (/^dojo/.test(request) || 26 | /^dojox/.test(request) || 27 | /^dijit/.test(request) || 28 | /^esri/.test(request) 29 | ) { 30 | return callback(null, "amd " + request); 31 | } 32 | callback(); 33 | } 34 | ], 35 | devtool: 'source-map' 36 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Ian Firkin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "esri-webpack-typescript", 3 | "version": "0.0.0", 4 | "description": "ESRI JSAPI with Webpack demo, using TypeScript", 5 | "main": "dist/main.bundle.js", 6 | "scripts": { 7 | "build": "webpack --config ./webpack.config.js", 8 | "start": "webpack-dev-server --hot --open", 9 | "test": "karma start --single-run", 10 | "postinstall": "typings install" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "" 15 | }, 16 | "keywords": [ 17 | "ESRI", 18 | "webpack", 19 | "typescript" 20 | ], 21 | "files": [ 22 | "dist" 23 | ], 24 | "author": "Ian Firkin", 25 | "license": "MIT", 26 | "devDependencies": { 27 | "html-webpack-plugin": "^2.28.0", 28 | "jasmine-ajax": "~3.1.1", 29 | "jasmine-core": "~2.3.4", 30 | "karma": "^0.13.21", 31 | "karma-chrome-launcher": "~0.1.12", 32 | "karma-dojo": "0.0.1", 33 | "karma-ie-launcher": "~0.2.0", 34 | "karma-jasmine": "~0.3.5", 35 | "karma-jasmine-ajax": "~0.1.12", 36 | "karma-phantomjs-launcher": "^1.0.0", 37 | "karma-webpack": "^1.7.0", 38 | "ts-loader": "^0.8.1", 39 | "tslint": "^3.2.1", 40 | "typescript": "^1.8.5", 41 | "typings": "^1.0.4", 42 | "webpack": "^2.2.0", 43 | "webpack-dev-server": "2.2.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry: { 6 | // entry point for your application code 7 | main: [ 8 | './src/app/main.ts' 9 | ], 10 | // put your third party libs here 11 | // vendor: [] 12 | }, 13 | output: { 14 | path: '/dist', 15 | filename: '[name].bundle.js', 16 | // the bundled output will be loaded by the Dojo AMD loader 17 | // that is included in the ArcGIS API for JavaScript 18 | libraryTarget: 'amd' 19 | }, 20 | resolve: { 21 | extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 22 | }, 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.tsx?$/, 27 | use: [ 28 | 'ts-loader' 29 | ] 30 | }, 31 | // css 32 | { 33 | test: /\.css$/, 34 | use: [ 35 | 'style-loader!css-loader' 36 | ] 37 | } 38 | ] 39 | }, 40 | plugins: [ 41 | new webpack.optimize.CommonsChunkPlugin({ 42 | name: 'vendor', 43 | minChunks: Infinity 44 | }), 45 | new HtmlWebpackPlugin({ 46 | inject: false, // we need to use the dojo loader 47 | jsapiVersion: '3.17', 48 | template: 'src/app/index.ejs' 49 | }) 50 | ], 51 | externals: [ 52 | function(context, request, callback) { 53 | if (/^dojo/.test(request) || 54 | /^dojox/.test(request) || 55 | /^dijit/.test(request) || 56 | /^esri/.test(request) 57 | ) { 58 | return callback(null, "amd " + request); 59 | } 60 | callback(); 61 | } 62 | ], 63 | devServer: { 64 | contentBase: './dist', 65 | historyApiFallback: true, 66 | hot: true, 67 | inline: true, 68 | port: 8000 69 | }, 70 | devtool: 'source-map' 71 | }; 72 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | 3 | var webpackConfig = require('./karma.webpack.config.js'); 4 | 5 | module.exports = function(config) { 6 | config.set({ 7 | 8 | // base path that will be used to resolve all patterns (eg. files, exclude) 9 | basePath: '.', 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: [ 'jasmine-ajax', 'jasmine', 'dojo'], 14 | 15 | // list of files / patterns to load in the browser 16 | files: [ 17 | {pattern: 'src/test/spec/tests.webpack.js', included: false}, 18 | 'src/test/spec/test-main.js' 19 | ], 20 | 21 | webpack: webpackConfig, 22 | 23 | autowatch: true, 24 | 25 | // list of files to exclude 26 | exclude: [], 27 | 28 | // preprocess matching files before serving them to the browser 29 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 30 | preprocessors: { 31 | 'src/test/spec/tests.webpack.js': ['webpack'] 32 | }, 33 | 34 | // test results reporter to use 35 | // possible values: 'dots', 'progress' 36 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 37 | reporters: ['dots'], 38 | 39 | // web server port 40 | port: 9876, 41 | 42 | // enable / disable colors in the output (reporters and logs) 43 | colors: true, 44 | 45 | // level of logging 46 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 47 | logLevel: config.LOG_INFO, 48 | 49 | // enable / disable watching file and executing tests whenever any file changes 50 | autoWatch: true, 51 | 52 | // start these browsers 53 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 54 | browsers: ['PhantomJS'], 55 | 56 | // Continuous Integration mode 57 | // if true, Karma captures browsers, runs the tests and exits 58 | singleRun: false 59 | }); 60 | }; --------------------------------------------------------------------------------