标签: browserify

我在使用browserify时遇到了一些麻烦.

目标

我正在尝试用Backbone构建基本的TodoMVC单页应用程序,而不是<script>在我的标签堆中index.html,我试图用browserify捆绑它们.

这是我到目前为止所做的事情.

LIB /模型/ todo.js

var backbone = require("backbone");

var Todo = module.exports = backbone.Model.extend({

  defaults: function() {
    return {
      title: "",
      completed: false,
      createdAt: Date.now(),
    };
  },

});

LIB /收藏/ todo.js

var backbone     = require("backbone"),
    LocalStorage = require("backbone.localstorage");

var TodoCollection = module.exports = backbone.Collection.extend({

  localStorage: new LocalStorage('todomvc'),

});

LIB/app.js

var Todo            = require("./models/todo"),
    TodoCollection  = require("./collections/todo");

(function(global) {

  global.todoCollection = new TodoCollection([], {model: Todo});

})(window);

要构建我的包,我正在使用

browserify lib/app.js > js/app.js

最后,我index.html很简单 …

嗨我正在使用grunt browserify任务来设置我的代码,我已经在jQuery中填充了,我现在正在尝试包含jquery.tablesorter.

jquery插件可以用这种方式与browserify一起使用吗？

shim: {
    jquery: {
        path: 'lib/bower/jquery/jquery.js',
        exports: '$'
    },
    'jquery.tablesorter': {
        path: 'lib/bower/jquery.tablesorter/js/jquery.tablesorter.js',
        exports: 'tablesorter',
        depends: {
            jquery: '$',
        }
    }
}

我是浏览器的新手.我尝试了下面的代码,并Uncaught ReferenceError: module is not defined在加载我的网页时得到了.一切都很简单,所以不确定我做错了什么:

chronoOpenList.js:

module.exports = function getChronoOpenList() {
    var xml = new XMLHttpRequest();
    xml.open("GET", "api/nextrequestdue/", true);
    xml.onreadystatechange = function () {
        if (xml.readyState === 4 && xml.status === 200) {
            var jsonText =  xml.responseText;
            parseChronoAndBuildElements(jsonText);
        }
    }
    xml.send(null);
}

main.js:

var getChronoOpenList = require('./chronoOpenList');
getChronoOpenList();

HTML:

<script style="text/javascript" src="{% static 'js/bundle.js' %}"></script>

浏览器的命令:

one@chat-dash /home/git/recognizer/recognizer_project/static/js $ /usr/local/lib/node_modules/browserify/bin/cmd.js main.js -o bundle.js

bundle.js:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var …

我想不出该怎么browserify basedir选项工程..

注意:我对整个basedir概念的理解可能是错的,因为我来自RequireJS(想想baseUrl).

编辑 确实我错了,但你仍然可以实现我试图做的paths选项,请参阅下面的答案.

我知道该basedir选项为您提供了.从静态根/基础目录中指定所有需要路径(以a开头)的能力(自由!)而不是来自process.cwd()..

这实际上让我发疯,我虽然这样的功能实现起来非常基础,并且很多人会遇到与我相同的问题,但网上实际上很少有关于如何正确设置的信息basedir选择..相信我,这不是直截了当的..

所以这是让我疯狂的基本例子.

给定以下文件结构:

js/
js/app.js
js/src/models/Person.js
js/src/views/PersonView.js

并运行:

var browserify = require('browserify');
var gulp = require('gulp');

gulp.task('scripts', function() {

  var b = browserify('./app', {basedir: './js'});

  b.bundle().pipe(gulp.dest('./dist'));
});

我希望能够进行以下require()调用PersonView.js:

var Person = require('./src/models/Person');
...

而不是(显然工作......):

var Person = require('../models/Person');
...

但是我收到以下错误:

Error: module "./src/models/Person" not found from "/Users/...some path.../js/src/views/PersonView.js"

我对这个basedir选项缺少什么？

我们既受到各种各样的JavaScript包管理解决方案的祝福和诅咒,所有这些都有各自的优点.由于这里无关紧要的原因,我已经确定了我的主要解决方案.但是,在其他系统(例如凉亭和组件)上有太多好的代码可以忽略这些解决方案.因此,我希望建立一个环境,我可以使用browserify从npm和bower加载包(我们将为另一个问题保存组件).

到目前为止,我提出的最好的方法是使用运行package.json的postinstall脚本来设置我bower install:

{
  ... configuration ...

  "scripts": {
    "postinstall": "bower install"
  }
}

这在构建第一级依赖项(即strait bower依赖项和strait npm依赖项)时构建正确的目录结构:

- MyMixedComponent
  - main.js
  - package.json
  - node_modules
    - npmDependency
  - bower_components
    - bowerComponent

使用browserify上的debowerify转换可以很好地构建,browserify -t debowerify 但是,当我想在另一个项目中从npm安装MyMixedComponent时npm install MyMixedComponent,目录结构就像你期望的那样构建了npm:

- MyNewProject
  - main.js
  - package.json
  - node_modules
    - MyMixedComponent
      - main.js
      - package.json
      - node_modules
        - npmDependency
      - bower_components
        - bowerComponent

由于bower是一个平面依赖树,当使用browserify和debowerify进行构建时,这当然不起作用.实际需要的是这样的:

- MyNewProject
  - main.js
  - package.json
  - …

我有一个场景,我想从客户端将数据导出到CSV.我将有一个文本框/区域或用户可以输入数据的任何位置,然后理想情况下只需单击一下,本地CSV文件将使用该数据进行更新.

这可以通过NodeJS与服务器交互及其核心模块(特别是fs模块)轻松实现,但显然不是来自浏览器.

我发现某些节点模块(例如underscore)支持RequireJS使特定模块在浏览器中工作的方法.所以对于下划线我做了这个:

methods.js

define(['underscore'],function(_) {

    var Methods = {
        doSomething: function() {

            var x = _.size({one: 1, two: 2, three: 3, xuz: 3});

            alert(x);
        }
    };

    return Methods;
});

common.js

requirejs.config({
    baseURL: 'node_modules',
    paths: {
        underscore: 'underscore/underscore',
    }
});

require(['methods'], function(y){
    y.doSomething();
});

的index.html

<script data-main="common" src="require.js"></script>
<script>
require(['common'], function() {

    require(['methods.js']);
});
</script>

以上工作正常,并将显示警报:4.

但是当我尝试使用fs模块时,它将无法正常工作.它会显示此错误:

Module name "util" has not been loaded yet for context: _. Use require([])

据我所知,这是因为fs需要其他几个模块,其中一个是util …

我使用browserify和gulp看到的所有示例都假设您只想浏览1个文件.通常情况并非如此.

我遇到了一个使用乙烯基变换的例子,但我无法让它正常工作.这是(咖啡脚本)代码:

# Browserify JS

gulp.task 'browserify', [], ->

    # Create the transform
    br = transform (f) ->
        return browserify(f).bundle()

    # Run browserify
    gulp.src(['./public/js/**/*.js'])
        .pipe(br)
        .pipe(gulp.dest('.'))

但是我收到以下错误:

[10:50:55] Starting 'browserify'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: write after end

我想创建一个独立的browserify包,它将导出的对象直接附加到window对象,而不是嵌套在附加到的包装器对象下window.

这样做,browserify忽略窗口:

browserify main.js --standalone window > bundle.js

该main.js文件如下所示:

var ModuleA = require('./module-a.js');
var ModuleB = require('./module-b.js');

module.exports = {
  ModuleA: ModuleA,
  ModuleB: ModuleB
}

我希望两个模块直接在全局命名空间中公开:window.ModuleA和window.ModuleB.

该文件没有提供明显的解决方案.

你能帮我吗？

我已经为Web开发创建了一个JS库,它由几个模块组成,这些模块构建了多个分发版本.当它通过cdn或例如使用Bower分发时,它很好.

但现在我正在尝试使用NPM发布它,以便可以使用Browserify进行消费.我的问题是如何静态暴露多个主文件,以便Browserify可以使用它们.

我有一点反应代码叫main.js:

var React = require('react');

var Comment = React.createClass({
render: function(){
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={{__html:marked(this.props.children.toString(), {sanitize:true})}} />
    </div>
  );
}
});

我正在尝试使用browserify并使用它重新执行:

browserify -t reactify main.js

但是我收到了这个错误:

Error: Cannot find module 'react' from '/Users/jameslin/projects/reactjs/react-0.13.2'
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

鉴于我已安装react和reactifynpm模块:

• npm install -g react
• npm install -g reactify