我正在尝试将我的项目设置为使用Gulp和Webpack作为我的捆绑器,我正在使用Underscore模板,其中一个使用_.each()
。当我运行webpack然后重新加载时,我得到一个指向模板的错误Uncaught ReferenceError: _ is not defined
,是否有人可以建议我如何将下划线暴露给模板?
Webpack配置
gulp.task('webpack', function() {
return gulp.src('./app/scripts/index.js')
.pipe(webpack({
// watch: true,
devtool: 'source-map',
debug: true,
output: {
filename: 'bundle.js',
path: __dirname
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'underscore-template-loader',
query: {
prependFilenameComment: __dirname,
},
exclude: /node_modules/,
},
{ test: /imagesloaded/, loader: 'imports?define=>false&this=>window'},
{ test: /underscore/, loader: 'exports?_' }
// { test: /backbone/, loader: 'exports?Backbone!imports?underscore,jquery' }
]
}
}))
.pipe(gulp.dest('./dist/scripts'));
});
模板
<% _.each(movies, function(movie) { %>
<a href="/movie/<%= movie.id %>" class="movie js-movie--show" data-id="<%= movie.id %>">
<img src="<%= movie.backdrop_small %>" alt="" class="trans-img is-hidden js-trans-img">
<span class="movie__info">
<h2><%= movie.title %></h2>
</span>
</a>
<% }); %>
我原来的Browserify捆绑包
gulp.task('scripts', function () {
var exchange = {
source_map: {
file: 'bundle.js.map',
root: '/',
orig: ''
}
};
var b = browserify({
entries: './app/scripts/index.js',
debug: true,
transform: ['jstify']
});
return b.bundle()
.pipe(plumber())
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(extractor({
removeSourcesContent: true
}))
.on('postextract', function(sourceMap) {
exchange.source_map.orig = sourceMap;
})
.pipe(filter('**/*.js'))
.pipe(gulp.dest('./dist/scripts/'));
});