标签: browserify

使用browserify样式代码运行jasmine HTML报告器的最佳方法是什么？我也希望能够用phantomjs运行这个无头,因此需要HTML报告器.

所以我想弄清楚如何做到这一点？我通过bower下载了bootstrap-sass并将bootstrap javascript添加到垫片中.

有些事让我困惑,bootstrap.js文件看起来像这样.

//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover

这是一种自我解释,但同时仍然令人困惑,我是否会这样评论？当我添加到bootstrap shim时,我只包含bootstrap.js文件,还是应该链接到我需要的所有文件？

为了避免被黑客攻击(我将在此期间进行),我想尝试获取有关如何将bootstrap.js包含在browserify中的一些信息.

编辑:我想我可能只需要连接我需要的所有文件并包含该脚本,因为当我浏览bootstrap.js时,我就得到了上述内容.

我会尝试没有评论,然后如果失败我会将所有脚本连成一个文件,看看会发生什么:)

编辑:嗯看起来像concat理论的作品!唯一的问题是jQuery,看一看.

; jQuery = global.jQuery = require("c:\\wamp\\www\\mysite\\app\\client\\requires\\jquery\\js\\jquery.js");
/* ========================================================================
 * Bootstrap: affix.js v3.1.1
 * http://getbootstrap.com/javascript/#affix
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

这是我编译的浏览器代码,当我调用bootstrap函数时让它工作的唯一方法就是说$('body').modal('toggle')我必须手动更改jQuery …

我有一些JavaScript代码从任意编译到JS语言编译到commonJS模块,我想使用sourcemaps调试浏览器化的代码.

所以我的文件已经//# sourceMappingURL=index.js.map有了,我希望browserify能够读取并转换它们,这样我就可以使用我原来的非JS语言进行调试.

我需要另一个变换吗？

我尝试使用browserify的调试标志,然后它确实生成了一个源图,但是它用于中间JS文件,而不是原始的非JS文件.我甚至看到原始//# sourceMappingURL语句在包中挥之不去,而我的浏览器调试器并不喜欢它.

这有可能吗？

我看到这一点:使用browserify后保留原始的打字稿源图但它不起作用.

我正在尝试使用以下插件/js/lib/stellar.jquery.js:

var $ = require('jquery');

require('./lib/stellar.jquery')

$(function(){
    $.stellar();
});

当我运行这个虽然我得到jQuery没有定义.我认为恒星jQuery插件是在jq库之前加载的.在stellar插件的底部有这个代码:

    ...
    // Expose the plugin class so it can be modified
    window.Stellar = Plugin;
}(jQuery, this, document));

将"jQuery"更改为"$"也不起作用,给出"$ is not defined"

所以浏览器在运行时通过JavaScript做所有事情,甚至是CSS的东西.但我如何处理字体,如npm和browserify字体真棒.

这里有一个npm pacakge:https://www.npmjs.org/package/font-awesome 但是如何在不使用grunt或gulp等其他工具的情况下为我的浏览器捆绑字体.

//编辑

如果我现在想在我的html中使用fa类,除了指向node_modules/font-awesome/css/font-awesome.css我的html文件之外还有其他方法吗？

我正在寻找一个自动解决方案,因为如果我有几个像font-awesome这样的库,并且他们带来了自己的资源,如字体,图像和其他文件,我不想在我的html文件中手动指向每个资产文件.

有了玉,我可以只提供一些文件public.并public包含通过我的远程依赖项来获得的所有资产,如字体,图像......但是如何将所有文件从特定文件复制或符号链接node_modules到public自动？

我正在使用Gulp作为我的任务运行器并使用浏览器来捆绑我的CommonJs模块.

我注意到运行我的browserify任务非常慢,大约需要2到3秒,我所拥有的只是React和我为开发构建的一些非常小的组件.

有没有办法加快任务,或者我的任务中是否有任何明显的问题？

gulp.task('browserify', function() {
  var bundler = browserify({
    entries: ['./main.js'], // Only need initial file
    transform: [reactify], // Convert JSX to javascript
    debug: true, cache: {}, packageCache: {}, fullPaths: true
  });

  var watcher  = watchify(bundler);

  return watcher
  .on('update', function () { // On update When any files updates
    var updateStart = Date.now();
        watcher.bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
        console.log('Updated ', (Date.now() - updateStart) + 'ms');
  })
  .bundle() // Create initial bundle when starting the task 
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('./'));
});

我正在使用Browserify,Watchify,Reactify和Vinyl Source Stream以及其他一些不相关的模块. …

我有一个使用browserify的小应用程序,它最近引起我的注意,有一个非常大的包.

是否有工具来分析browserify文件并找出大部分文件大小的来源？

如何减少浏览器生成文件的大小？

我有一个"中等"的Typescript应用程序(在很简单,但不是企业级,数千行)依赖于jQuery,React和SocketIO - 以及其他较小的库.

我目前的gulpfile是这样的:

var gulp = require("gulp"),
    $ = require("gulp-load-plugins")(),
    _ = require("lodash"),
    tsify = require("tsify"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream"),
    debowerify = require("debowerify"),
    watchify = require("watchify"),
    lr = require("tiny-lr"),
    buffer = require("vinyl-buffer");

var lrServer = lr();

var config = {
    scripts: {
        base: __dirname + "/Resources/Scripts",
        main: "Application.ts",
        output: "App.js"
    },

    styles: {
        base: __dirname + "/Resources/Styles",
        sheets: ["Application.less", "Preload.less"],
        autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
    }, …

我想尝试使用browserify来构建我的项目.看起来很酷我可以使用相对路径来要求js文件,然后将这些文件捆绑并缩小.但是我还不清楚,如果我能自动将该包添加到html中

<script src=".../.../bundle.min.js"></script>

而且,如果我可以用css做类似的技巧 - 不知何故需要css文件,包括供应商的文件,捆绑和缩小文件并将捆绑的css注入html head作为<link>标记,而不是<style>.

那可能吗？如果是这样的话？或者,也许这样的想法本身只是对如何构建项目的误解？如果是这样,我在哪里错了？

在我当前的工作流程中,我需要创建browserify包,但也希望将非commonjs js库连接到文件的开头以公开全局变量,同时还减少http请求的数量和js文件的大小.(其他捆绑包也可能需要其中一些库)

我目前有一个gulp任务,创建browserify包并将任何所需的libs连接到输出文件的开头,但是我发现在合并流时,我的源图是破坏的,并且在Web检查器中; 生成的映射仅显示预先uglified browserify包,而不是单独的js模块.

var gulp          = require("gulp"),
buffer            = require('vinyl-buffer'),
gulpif            = require("gulp-if"),
sourcemaps        = require("gulp-sourcemaps"),
merge             = require('merge-stream'),
concat            = require('gulp-concat'),
uglify            = require("gulp-uglify")
livereload        = require("gulp-livereload");

// compile scripts
gulp.task("scripts", function() {
  "use strict";

  // Iterate over bundles
  var tasks = config.browserifyBundles.map(function(item){

    // Use entry file for output file name
    var outputName = item.mainfile.replace(/^.*[\\\/]/, ''); 
    var browserifyStream = browserify({
      entries: item.mainfile,
      debug: env !== "production"
    }).bundle()
    .on("error", notify.onError())
    .pipe(source(outputName))
    .pipe(buffer())
    .pipe(gulpif(env !== "production", sourcemaps.init()))
    .pipe(gulpif(env !== …