在Underscore模板中使用Underscore函数webpack会抛出错误未定义

时间:2015-11-30 12:34:47

标签: javascript templates gulp underscore.js webpack

我正在尝试将我的项目设置为使用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/'));
});

0 个答案:

没有答案