Ответы пользователя по тегу JavaScript
  • Где найти эффект заползающего блока?

    qodunpob
    @qodunpob
    Look at my code, my code is amazing!
    Попробуйте искать параллакс-скроллинг pixelcog.github.io/parallax.js
    https://www.google.ru/?ion=1&espv=2#q=jquery%20par...
    Ответ написан
    Комментировать
  • Почему не работает owl.carousel?

    qodunpob
    @qodunpob
    Look at my code, my code is amazing!
    Насколько я помню, помимо js OWL Carousel еще и css в себя включает. Но тут у вас скорее конфликт с версией jquery, попробуйте более раннюю версию. А вообще проект давно заброшен. Последняя его версия полна багов и доставила мне не мало проблем в свое время. Рекомендую присмотреть что-нибудь другое, Swiper например.
    Ответ написан
    6 комментариев
  • Как написать gulp-task для сборки модульного js с помощью browserify?

    qodunpob
    @qodunpob Автор вопроса
    Look at my code, my code is amazing!
    Сам спросил - сам отвечу. Как я понял, ни для browserify, ни для webpack нельзя указать wildcard в качестве точек входа. В своих поисках я пришел к двум решениям.

    Если решать задачу с помощью browserify, необходимо самостоятельно позаботиться о формировании списка файлов и создании всех необходимых директорий. Получится нечто вроде этого:
    gulp.task('compile-typescript', function () {
        let browserify = require('browserify'),
            factor = require('factor-bundle'),
            tsify = require('tsify'),
            path = require('path'),
            source = require('vinyl-source-stream'),
            glob = require('glob'),
            mkdirp = require('mkdirp'),
    
            srcDir = 'static/typescript/compile/',
            distDir = 'public/static/js/',
    
            entries = glob.sync(srcDir + '**/*.@(ts|tsx)'),
            outputs = [],
    
            mkdirProccess = [],
    
            typescriptOptions = {
                module: 'commonjs',
                target: 'es5',
                jsx: 'React'
            };
    
        entries.forEach(function (filename) {
            let relativePath = path.dirname(path.relative(srcDir, filename)),
                basename = path.basename(filename, path.extname(filename)) + '.js';
    
            if (relativePath === '.') {
                relativePath = '';
            } else {
                relativePath += '/';
                mkdirProccess.push(new Promise(function (resolve, reject) {
                    mkdirp(distDir + relativePath, function (error) {
                        if (error) reject(error);
                        else resolve();
                    });
                }));
            }
    
            outputs.push(distDir + relativePath + basename);
        });
    
        Promise.all(mkdirProccess)
            .then(function () {
                browserify({
                    entries,
                    debug: true
                })
                    .plugin(tsify, typescriptOptions)
                    .plugin(factor, {
                        outputs,
                        threshold: 2
                    })
                    .bundle()
                    .pipe(source('common.js'))
                    .pipe(gulp.dest(distDir));
            });
    });

    Однако, в таком случае source maps будут включены в итоговые файлы и содержать некорректные ссылки на исходники.

    Но с использованием webpack-stream можно значительно упростить решение и получить желаемый результат:
    gulpfile.js
    gulp.task('compile-typescript', function () {
        let webpack = require('webpack-stream'),
            named = require('vinyl-named'),
    
            srcDir = 'static/typescript/compile/',
            distDir = 'public/static/js/';
    
        return gulp.src(srcDir + '**/*.@(ts|tsx)')
            .pipe(named(file => file.relative.replace(/\.tsx?$/, '')))
            .pipe(webpack(require('./webpack.config.js')))
            .pipe(gulp.dest(distDir));
    });

    webpack.config.js
    'use strict';
    
    const webpack = require('webpack');
    
    module.exports = {
        resolve: {
            extensions: ['', '.webpack.js', '.web.js', '.js', '.ts', '.tsx']
        },
        output: {
            sourceMapFilename: 'maps/[file].map'
        },
        module: {
            loaders: [
                { test: /\.tsx?$/, loader: 'ts-loader' }
            ]
        },
        plugins: [
            new webpack.NoErrorsPlugin(),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                minChunks: 3
            })
        ],
        devtool: 'source-map'
    };

    tsconfig.json
    {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "jsx": "React",
        "sourceMap": true
      }
    }
    Ответ написан
    Комментировать