标签: browserify

我试图让grunt-browserfy使用coffeescript的相对路径,但是当我尝试构建我的源时,我总是有一条错误消息:

>> Error: module "src/app/utils/includeMixin" not found from "/[ABSOLUTE-PATH-TO-MY-PROJECT]/project/src/app/app-audit.coffee"

我的文件层次结构如下所示:

project
 |- build
 |   |- libs.js
 |   |- audit.js
 |- src
     |- app
         |- app-audit.coffee
         |- utils
             |- includeMixin.coffee
     |- vendor
 |- node_modules
 |- gruntfile.coffee

我使用grunt-browserify和remapify插件,coffeeify来转换我的来源.

我还使用grunt-browserifyBower来构建我的库,但这个作品就像魅力一样.

这是我的gruntfile.coffee的一个例子:

#Init grunt module
module.exports = (grunt) ->
    'use strict';

    remapify = require 'remapify'
    #Init Configuration
    grunt.initConfig
        browserify:
            dev:
                files:
                    "build/audit.js": ["src/app/app-audit.coffee"]
                options:
                    browserifyOptions:
                        extensions: ['.coffee']
                    bundleOptions:
                        debug: true
                    preBundleCB: (b) ->
                        b.plugin remapify, [{
                            src: 'src/**/*.*'
                            expose: 'src'
                            cwd: __dirname
                        }]
                    transform: …

我不明白如何使用browserify在不同视图之间共享某种"单例"应用程序状态保持对象模型.书籍和教程通常使用全局命名空间,例如:

var app = app || {};

我有一个简单的示例应用程序,其中包括:

app.js

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var MenuView = require('./views/MenuView');
var ContainerView = require('./views/ContainerView');

new MenuView();
new ContainerView();

MenuView.js

var Backbone = require('backbone');
var ApplicationState = require('../models/ApplicationState');

module.exports = Backbone.View.extend({
    el: '#menuView', 
    events: {
        'click .menuLink': 'changePage'
    },
    changePage: function(event) {
        event.preventDefault();
        var viewName = $(event.target).attr('data-view');
        ApplicationState.set('currentView',viewName);
    }
});

ContainerView.js

var Backbone = require('backbone');
var ApplicationState = require('../models/ApplicationState');

module.exports = Backbone.View.extend({
    el: '#containerView', 
    initialize: function() { …

我刚刚开始研究一个我想在ReactJS中编写的新项目.我试图使用Broserify捆绑所有东西,以便我可以在多个js文件中.

但是,当我尝试捆绑我的react文件(browserify main.js > bundle.js)时,我收到此错误:"错误:解析文件/Users/Kathleen/Documents/Referral_Site/main.js:Unexpected token(3:4)"

main.js看起来像这样:

var Lander = require('./lander');
React.render(
    <Lander />,
    document.getElementById('content')
);

什么打破了解析器？提前致谢!

编辑:另外,我包括在周围的HTML反应如下:

<script src="http://fb.me/react-0.12.2.js"></script>

有什么方法我需要将它包含在main.js中吗？

有没有办法在像plnkr,JSFiddle或JS Bin这样的网站上使用CommonJS模块？我想把它变成一个全球性的.

这是为了轻松提供演示而无需使用UMD.

我找到了Github repos,然后使用rawgit.com引用源文件.

我使用browserify进行新项目.到目前为止它确实很好用.

我有一个大问题.如何单独调试每个js文件.它将所有文件捆绑在一起,如果发生错误则指向捆绑.

我正在使用chrome和源映射,但它在调试方面并没有真正帮助.

有任何想法吗？

更新:更多信息:

我在package.json中使用此命令

"start": "watchify scripts/main.js -o scripts/bundle.js --debug",

并获得如上所示的错误,这是不理想的.

我相信我的源地图已开启？

在browserify-handbook中,排除part,它给出了使用exclude的示例:

$ npm install jquery
$ browserify -r jquery --standalone jquery > jquery-bundle.js

那么我们想在main.js中要求('jquery'):

var $ = require('jquery');
$(window).click(function () { document.body.bgColor = 'red' });

推迟到jquery dist bundle,这样我们就可以写:

<script src="jquery-bundle.js"></script>
<script src="bundle.js"></script>

并且没有在bundle.js中显示jquery定义,然后在编译main.js时,你可以--exclude jquery:

browserify main.js --exclude jquery > bundle.js

但当我尝试运行此示例时,我收到"未捕获错误:无法找到模块'jquery'"的错误

我知道如果我使用独立,我可以使用'jquery'作为全局变量,但它不是模块化的,所以我仍然希望使用"require('jquery')"作为样本,所以,我该怎么做实现这一目标？

我正在使用node,gulp和browserify来使我的JS文件正确顺序并管理模块.我将jQuery和AngularJS安装为节点模块,并在需要时需要它们.Angular默认使用jqLit​​e来处理DOM-Elements.

我知道当jQuery在AngularJS之前加载时,Angular将使用jQuery而不是jqLit​​e.

但是在使用browserify时如何让Angular使用jQuery呢？或者:怎么可能需要jQuery角度？

现在我正在做var $ = require("jquery");,并在需要时使用它.但是我希望有一个Angular,例如在做的时候会原生地给我jQuery方法:

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var a = $elem.width();//jQuery methods currently not available here
        }
    };
});

我真正需要做的是:

var jQuery = require("jquery");

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var jqElement = jQuery($elem);
            var a = $jqElement.width();//jQuery methods are available here
        }
    };
});

我正准备通过babel使用ES6模块导入/导出,但在本文中遇到了这个令人困惑的声明.

它指出:

ES6的的功率import和export用结合require()的方法,使我们的自由,所有的客户端代码的组织成模块,并在同一时间写使用JavaScript的新版本的所有功率的代码.

这使它听起来像ES6的系统,并require()提供两种不同的目的,从而使这种babel/browserify方法成为最好的方法.我的理解是他们都做了同样的事情,只是有点不同.有人可以帮忙解释一下吗？

目前，我将单个js文件浏览器分解为bundle.js

$ browserify X1.js --standalone XXX > bundle.js

如果我有多个js文件并想将它们加入一个浏览器化的bundle.js中怎么办

命令应如何显示？我可以做这样的事情吗？

$ browserify X1.js X2.js --standalone XXX > bundle.js

我正在使用node.js v6

我已将赛普拉斯从更新3.0.3为3.1.3。我正在使用必须与文档相关的ES6导入/导出模块。但是我undefined在终端中出现一行并且在GUI中出现以下错误：

<root_dir>/node_modules/@babel/runtime/helpers/esm/defineProperty.js:1
export default function _defineProperty(obj, key, value) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我的测试使用的是普通JS，没有TS os CoffeeScript。我陷入困境，在3.0.3它工作正常。