All geek questions in one place

How might Modernizr 3.x modules be required?

I am trying to require specific Modernizr tests in a browser project, but I must be doing something wrong.

I use deamdify when creating using a browser.

Modernizr is required as an NPM package directly from the source repo server. The reason for this is that the pending v3.x will be available through npm, and the latest bower packages do not offer sources, but only ready-made versions.

I want to be flexible with the fact that the Modernizr modules that I include in my application, so for my needs, the additional build-modernizr step is not acceptable. I want one build step, to the browser.

The problem is that deamdifyit cannot recognize the required Moderizr modules as AMD and does not resolve their dependencies or does not transfer them to AMD containers ...

I installed a repo that illustrates the problem:

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

+4
source share
3 answers

No, you are not doing anything wrong. Its just not configured to work so long. This is a bit of an ordinary AMD.

@robw was working on a new build system , which I believe will show that you are doing what you are looking for.

: the new build system is finally operational - with the wizard on 2/8/2015 you can require tests

+1
source

, build-modernizr ( ), Modernizr gulp.

gulp-modernizr , Modernizr Modernizr:

npm install --save-dev gulp-modernizr

gulp gulpfile.js:

var modernizr = require('gulp-modernizr')

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

build/modernizr.js, , . html <script> Modernizr window.Modernizr. :

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

modernizr .

modernizr (. ), 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'));
});
+1

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 .

0

Source: https://habr.com/ru/post/1532997/

More articles:


All Articles