Webpack可以將require("dexie");映射到window.Dexie。
所有你需要做的就是聲明你webpack.config.js如下：
module.exports = {
externals: {
'dexie': 'Dexie'
}
};
這裏是一個最小工作實例爲完整起見：
目錄佈局：
- bower_components （目錄從
bower install）
- DIST（目錄從
gulp default）
- node_modules（目錄從
npm install）
- SRC（對於打字稿源代碼目錄）
- 分型（目錄從
typings install）
- bower.json（前端依賴）
- gulpfile。JS（構建配置）
- 的index.html（演示頁來測試webpacked代碼）
- index.js（用於分發主入口點）
- 的package.json（工作流程和建立依賴關係）
- tsconfig.json （打字稿編譯器配置）
- webpack.config.json（的WebPack配置）
的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"
}
}
注：node項來自typings install dt~node --global --save，並且需要打字稿在module.exports語句來解決module。
webpack.config.js
module.exports = {
externals: {
'dexie': 'Dexie'
}
};
方法：
打字稿代碼進口Dexie和使用命名空間storage聲明本身。要遵循commonjs依賴關係管理方法（在tsconfig.json中聲明），TypeScript代碼需要將storage命名空間作爲模塊導出：module.exports = storage。
由於TypeScript不知道module對象，我們需要獲取它的定義。 module定義是node的類型定義的一部分，我們從DefinitelyTyped存儲庫獲得typings工具使用typings install dt~node --global --save。要在TypeScript中鏈接節點檢索到的類型定義，我們需要聲明/// <reference path="../typings/index.d.ts" />。
在我們編譯我們的TypeScript代碼（使用gulp build）之後，我們需要聲明一個入口點來使我們的代碼可訪問。這在index.js中完成。成功構建輸出我們的dist/storage.js文件，該文件在index.js中引用。
當構建到位時，我們可以對我們的代碼進行webpack（將其捆綁爲HTML5瀏覽器）。我們的webpack.config.js將我們依賴關係的「require」名稱（dexie）映射到全局名稱空間（window.Dexie）中的對象。這保證我們，Dexie不是我們編譯代碼的一部分（dist/webpacked.js）。
一旦我們有webpacked.js，我們可以在瀏覽器中使用它。但是我們必須確保所有的外部依賴都在我們的HTML頁面被引用（這就是爲什麼Dexie也被聲明爲使用Bower的前端依賴）。
你可以評估使用requirejs？ – InferOn