Webpack has the capability to map require("dexie"); to window.Dexie.
To achieve this, simply add the following configuration in your webpack.config.js:
module.exports = {
externals: {
'dexie': 'Dexie'
}
};
Below is a detailed example for better understanding:
Directory Structure:
- bower_components (directory created from
bower install)
- dist (directory generated by
gulp default)
- node_modules (directory obtained through
npm install)
- src (folder containing TypeScript source code)
- typings (folder created using
typings install)
- bower.json (Frontend dependencies file)
- gulpfile.js (Build configuration file)
- index.html (demo page to test webpacked code)
- index.js (main entry point for distribution)
- package.json (workflow and build dependencies file)
- tsconfig.json (TypeScript compiler configuration file)
- webpack.config.json (Webpack configuration file)
src/storage.ts
/// <reference path="../typings/index.d.ts" />
import Dexie from "dexie";
namespace storage {
export function setupDatabase():void {
let db = new Dexie('MyDatabase');
db.version(1).stores({
friends: 'name, age'
});
db.open().then(function () {
console.log('Initialized database: ' + db.name);
});
}
}
module.exports = storage;
bower.json
{
"name": "storage",
"main": "dist/webpacked.js",
"private": true,
"dependencies": {
"dexie": "^1.4.1"
}
}
gulpfile.js
var gulp = require('gulp');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
var webpack = require('webpack-stream');
gulp.task('build', function () {
return gulp.src('src/**/*.ts')
.pipe(ts(tsProject))
.pipe(gulp.dest('dist'));
});
gulp.task('webpack', function () {
return gulp.src('dist/index.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(rename('webpacked.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', function (done) {
runSequence('build', 'webpack', done);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<script src="bower_components/dexie/dist/dexie.js"></script>
<script src="dist/webpacked.js"></script>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function() {
storage.setupDatabase();
}, false);
</script>
</body>
</html>
index.js
window.storage = require('./dist/storage');
package.json
{
"name": "storage",
"private": true,
"devDependencies": {
"dexie": "^1.4.1",
"gulp": "^3.9.1",
"gulp-rename": "^1.2.2",
"gulp-typescript": "^2.13.6",
"run-sequence": "^1.2.2",
"webpack-stream": "^3.2.0"
}
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es5"
},
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
]
}
typings.json
{
"globalDependencies": {
"node": "registry:dt/node#6.0.0+20160709114037"
}
}
In conclusion, by setting up the configurations as mentioned above, you can successfully bundle and use your TypeScript code with Webpack while ensuring all dependencies are correctly referenced.