Question

我正在尝试将特定的Modernizr测试用于browserify项目，但我必须做错事。

在使用browserify构建时，我使用deamdify转换。

Modernizr需要直接来自源代表的主人的NPM包。发生这种情况的原因是因为挂起的v3.x将通过npm提供，而最新的bower包不提供源，只提供预建版本。

我希望能够灵活应用我的应用程序中包含的Modernizr模块，以满足我的需求，不能接受额外的构建 - 现代化步骤。我想要一个构建步骤，浏览器化。

问题是deamdify无法将所需的Moderizr模块识别为AMD，并且无法解析它们的依赖关系或将它们包装在AMD容器中......

我已经设置了一个说明问题的回购：

https://github.com/thanpolas/browserify-modernizr

Answer 1

不，你没有做错任何事。它还没有像那样开始工作。它有点定制AMD。

@robw已working on a new build system我相信会让您做出您想要的事情。

更新：新的构建系统终于生效 - 使用自2015年2月8日起的主程序，您可以要求进行测试

Answer 2

虽然你说有一个额外的build-modernizr步骤对你来说是不可接受的（我为那个案例提供了answer）但是我仍然希望在使用browserify和Modernizr with gulp时为这个案例添加另一个答案。

gulp-modernizr可以抓取指定的文件，查找Modernizr用法并进行自定义Modernizr构建：

npm install --save-dev gulp-modernizr

在gulpfile.js中定义gulp任务：

var modernizr = require('gulp-modernizr')

gulp.task('modernizr', function () {
    return gulp.src('src/**/*.js')
        .pipe(modernizr())
        .pipe(gulp.dest('build'));
});

此任务生成build/modernizr.js，其中仅包含源代码中使用的测试。当使用<script>标记添加到html文件时，此文件将Modernizr实例设置为window.Modernizr属性。所以你可以使用它：

if (window.Modernizr.filereader) {
    // your code here
}

使用modernizr作为模块。

如果您想使用modernizr作为模块（请参阅this issue进行讨论）而不是创建src/modernizr.js文件：

module.exports = window.Modernizr;

将此文件公开为名为modernizr的模块：

var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('browserify', ['modernizr'], function() {
    var b = browserify({ entries: 'src/index.js' });
    b.require('src/modernizr.js', {expose: 'modernizr'});
    return b.bundle()
        .pipe(source('index.js'))
        .pipe(gulp.dest('build'));
});

现在您可以在源代码中使用它：

var modernizr = require('modernizr');

if (modernizr.filereader) {
   ...
}

在build/modernizr.js中注入build/index.js和index.html个脚本。

假设您有src/index.html：

<!DOCTYPE html>
<html class='no-js' lang=''>
<head>
    <meta charset='UTF-8'>
    <title>Example</title>
    <!-- inject:head:js -->
    <!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>

以下gulp任务会在build/modernizr.js部分注入head，在build/index.js部分注入body，并将生成的文件投放到build/index.html：

var inject = require('gulp-inject');

gulp.task('html', ['browserify'], function() {
    return gulp.src('src/index.html')
        .pipe(inject(gulp.src('build/modernizr.js', { read: false }),
        { ignorePath: 'build', addRootSlash: true, starttag: '<!-- inject:head:{{ext}} -->'}))
        .pipe(inject(gulp.src('build/index.js', { read: false }),
        { ignorePath: 'build', addRootSlash: true}))
        .pipe(gulp.dest('build'));
});

Answer 3

使用browsernizr，您可以在源代码中指定所需的测试。

安装：

npm install --save browsernizr

使用：

// pick what tests you need 
require('browsernizr/test/css/rgba');
require('browsernizr/test/file/filesystem');
require('browsernizr/test/websockets');

// make sure to do this after importing the tests 
require('browsernizr');

// or if you need access to the modernizr instance: 
var Modernizr = require('browsernizr');

browserify将包括所需的测试。

如何使用Modernizr 3.x模块？

3 个答案: