1
私はインラインスクリプトから直接呼び出すことができるエクスポートでtypescriptからjsバンドルを構築しようとしていますが、それを働かせる。ブラウザで空白のgulp、空のオブジェクトで構築されたWebpackバンドルでTypescript関数をエクスポート
私はこのような活字体ソースファイルを持っている：
export namespace Init {
export function index() {
// do some things
}
}
export function blahblah() { console.log('blahblah') }
これは、同じフォルダsrc/ts/*.tsでいくつかの他のソースと一緒に座っています。私webpack.config.jsは、次のようになります。
'use strict';
module.exports = {
context: __dirname,
output: {
filename: 'bundle.js',
library: 'bitthicket',
},
devtool: 'sourcemap',
resolve: {
extensions: [ '.ts', '.tsx', '.js' ]
},
module: {
rules: [
{ test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader' }
]
}
}
そして最後に、私のgulpfile.jsは次のようになります。
var gulp = require('gulp')
var gutil = require('gulp-util')
var plumber = require('gulp-plumber')
var watch = require('gulp-watch')
var sass = require('gulp-sass')
var ts = require('gulp-typescript')
var clean = require('gulp-clean')
var webpack = require('webpack')
var webpack_config = require('./webpack.config.js')
var webpack_stream = require('webpack-stream')
let _sass =() =>
gulp.src('src/css/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('static/css'))
.on('end',() => gutil.log('_sass: done'))
let _webpack =() =>
gulp.src('src/ts/**/*.ts')
.pipe(plumber())
.pipe(webpack_stream(webpack_config, webpack))
.pipe(gulp.dest('static/js'))
.on('end',() => gutil.log('_webpack: done'))
gulp.task('build:sass', _sass)
gulp.task('clean:sass',() => gulp.src('static/css/**/*').pipe(clean()))
gulp.task('watch:sass',() => watch('src/css/**/*.scss',() => _sass()))
gulp.task('build:webpack', _webpack)
gulp.task('clean:ts',() => gulp.src('static/js/**/*').pipe(clean()))
gulp.task('watch:webpack',() => watch('src/ts/**/*.ts',() => _webpack()))
gulp.task('watch', ['watch:sass', 'watch:webpack'])
gulp.task('clean', ['clean:sass', 'clean:ts'])
gulp.task('build', ['build:sass', 'build:webpack'])
gulp.task('default', ['clean', 'build'])
HTMLファイルに：
<script src="bundle.js" async></script>
<script>window.onload = function() { console.log(bitthicket); }</script>
何が起こっています、私が理解しているように、Webpackは、webpack {src list} bundle.jsのようなコマンドライン上に置かれているかのように、ソースのパイプリストをエントリファイルとして取得しています。しかし、私はlibrary出力オプションを設定して、bitthicket変数が設定されますが、空のオブジェクトです。 Init.indexに何が起こりましたか？
編集：Init名前空間にエクスポートキーワードを追加しました。また、何か起こるかどうかを確認するために平方関数init.tsに追加しましたが、結果として得られるオブジェクトにはまだそれらの機能がありません。ここで
は、得られWebPACKのブートストラップ引数です：
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _ = __webpack_require__(2);
var Init;
(function (Init) {
function index() {
Nav.attachNavbarScrollWatcher();
document.addEventListener('scroll', function (event) {
var articles = document.querySelectorAll('.featured column.summary article');
var visibleArticle = _.find(articles, function (el) { return Util.isElementInViewport(el); });
console.log("{0} just became visible", visibleArticle);
});
}
Init.index = index;
})(Init = exports.Init || (exports.Init = {}));
function blahblah() {
console.log('blahblah');
}
exports.blahblah = blahblah;
/***/ }),
あなたが見ることができるように、exports.blahblahとexports.Init.indexはこのブロックに割り当てられている - しかし、私は私のブラウザで取り戻すオブジェクトは次のようになります。
