标签: browserify

我使用Browserify将大型Node.js应用程序编译成单个文件(使用选项--bare和--ignore-missing[以避免lib-cov在Express中出现问题]).我有一些代码可以根据目录中的可用内容动态加载模块:

var fs = require('fs'),
    path = require('path');

fs.readdirSync(__dirname).forEach(function (file) {
    if (file !== 'index.js' && fs.statSync(path.join(__dirname, file)).isFile()) {
        module.exports[file.substring(0, file.length-3)] = require(path.join(__dirname, file));
    }
});

我在我的应用程序中遇到奇怪的错误,其中从我编译的文件加载的目录中加载了aribtrary文本文件.我认为这是因为路径不再正确设置,并且因为Browserify将无法使用require()正确的文件像这样动态加载.

如果没有制作静态index.js文件,是否有一种首选方法可以动态地要求与Browserify开箱即用兼容的模块目录？

今天我为我的AngularJS项目采用了Browserify,但有些东西对我来说非常不清楚.在所有示例和博客文章中我都看到过这样的内容:

/app.js:

require('./messages');
angular.module('sling', ['sling.messages']);

/messages/index.js:

exports = angular.module('sling.messages', [])
    .controller('MessagesListCtrl', require('./MessagesListCtrl'));

/messages/MessagesListCtrl.js:

module.exports = function() {
    // ...
});

当然,这有效,但为什么这样呢？我已经像这样实现了它并且工作得非常好,并且对于AngularJS项目感觉更正常:

/app.js:

require('./messages');
angular.module('sling', ['sling.messages']);

/messages/index.js:

angular.module('sling.messages', []);
require('./MessagesListCtrl');

/messages/MessagesListCtrl.js:

angular.module('sling.messages').controller('MessagesListCtrl', function() {
    // ...
});

换句话说,我完全跳过exports/module.exports,只使用require基本上包含控制器,服务,过滤器等的文件.

我这样做了吗？我的意思是一切正常,但我以后会遇到麻烦吗？

我想知道如何在Play Framework 2.3+中使用CommonJS模块？

我想一个Browserify插件可以用类似于sbt-less插件的方式编写,但在开始之前我想知道其他人是如何处理它的.

在play框架构建过程中是否已经有一种方法可以使用Browserify？

在我的前端代码中,我使用require()了库,而库依赖于不同版本的Underscore.js.因此,当我使用browserify将所有内容捆绑在一起时,输出包含Underscore的多个副本.有没有办法告诉browserify require('underscore')应该始终导入特定文件？

作为问题的演示,假设我有以下依赖项:

// package.json
"dependencies": {
  // Depends on underscore 1.7.0
  "backbone": "^1.1.2",

  // Depends on underscore 1.6.0
  "backbone.marionette": "^2.3.0"
}

在main.js我使用两个库:

// main.js
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
console.log("Hello, world!");

当我创建一个包时,包含了多个版本的Underscore:

PS> browserify main.js -o out.js
PS> findstr _.VERSION out.js
  _.VERSION = '1.7.0';
  _.VERSION = '1.6.0';

(我创建了一个带有更完整示例的GitHub存储库.克隆它并运行npm install && npm test以查看它的运行情况)

我尝试在下面添加一个browser部分package.json,但它似乎没有任何影响:

// package.json
"browser": {
  "underscore": "./node_modules/underscore/underscore.js"
}

我理解为什么要npm安装重复的依赖项(这对于服务器端代码这样做是有意义的)但是在使用browserify时处理这个问题的正确方法是什么？

我正在尝试使用Angular和Browserify构建项目.我的controllers.js文件看起来像这样......

'use strict';

module.exports.testController = function($scope){
    $scope.message = 'Controller 1';
    console.log( 'hello' );
};

正如您所料,这会产生三个掉毛错误.

• 使用Strict的函数形式
• "模块"未定义
• "控制台"未定义

我确实在这里找到了一些解决方案,它使JSHint能够处理Node.js文件,方法是将文件jslint node: true顶部放在这样的顶部

   /*jslint node: true */
   'use strict';

    module.exports.testController = function($scope){
        $scope.message = 'Controller 1';
        console.log( 'hello' );
    };

但是,这显然修复了太多; 'console.log(...)'仍然应该是未定义的.

有谁知道如何在Browserify中使用JSHint？

所以我一直在玩React.js,gulp和browserify.一切都很好,直到我尝试在我的main.js文件中需要一个模块.我要求其他文件中的组件/模块没有问题(见下文),但是当我尝试在我的main.js文件中需要一个时,我在运行时收到以下错误gulp serve:

错误:无法从/ Users/kevin/Documents/MyWork/web/react/node_modules/browserify中的'/ Users/kevin/Documents/MyWork/web/react/app/src/js'找到模块'./components/Feed' /node_modules/resolve/lib/async.js:55:21 at load(/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)atx (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)位于/ Users/kevin/Documents/MyWork/web/react/node_modules/browserify /在Object.oncomplete(fs.js:107:15)中的node_modules/resolve/lib/async.js:22:47

如果我从中删除require(for Feed.js)语句main.js,那么所有内容都会编译并放入相应的dist文件夹并运行正常(当然,react.js会抱怨缺少模块).

首先,我的文件夹结构如下所示:

app
?-- gulpfile.js
?-- package.json
?
????src
?   ?
?   ????js
?       ?-- main.js
?       ????components
?            ?-- Feed.js
?            ?-- FeedList.js
?            ?-- FeedItem.js
?            ?-- FeedForm.js
?            ?-- ShowAddButton.js
?            ?
?   
????dist

我的gulpfile看起来像这样:

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    open = require("gulp-open"),
    browserify = require('browserify'),
    reactify = require('reactify'),
    source = require("vinyl-source-stream"),
    concat …

如标题所示，即使我也想使用babel-polyfill允许我在代码中使用promise，但是我在IE11中遇到了未定义的错误。

我已经尝试过一段时间了，因为我已经看到几次在不同的站点上被问到，但是没有一种解决方案真正适合我（或更准确地说，我可能无法适应它们）我的代码）

我认为这些文件涉及：

.babelrc

{
    "presets": [
        "es2015",
        "react"
    ]
}

package.json：我在开发人员依赖项下拥有babel-polyfill，并试图将其置于依赖项下（都只是通过控制台手动交换并安装它），但似乎都没有用

我的script.js没有将其作为导入（但是，当我在package.json中看到该语法时，如果我尝试导入@ babel-polyfill或带正斜杠的其他组合，则找不到该模块）

最后，我的gulpfile.babel.js拥有以下任务：

gulp.task('build:js', ['lint'], () => {
    return browserify({
            entries: path.resolve(paths().source.js, 'script.js'),
            extensions: ['.jsx'],
            debug: true
        })
        .transform(babelify)
        .plugin('minifyify', {
            map: 'script.js.map.json',
            output: path.resolve(paths().public.js, 'script.js.map.json')
        })
        .bundle()
        .pipe(source('script.js'))
        .pipe(gulp.dest(path.resolve(paths().public.js)))
        .pipe(notify({
            onLast: true,
            message: 'Building JS done'
        }));
});

我做错了什么？

谢谢

我有一个相当大的多页面javascript应用程序,它使用requirejs来组织代码.我正在研究迁移到browserify,因为我喜欢它提供的简单性,我已经习惯了node.js模块系统.

目前在每个页面上我都有这样的javascript

<script data-main="/scripts/config/common" src="/scripts/lib/require.js">
<script data-main="/scripts/config/page-specific-js" src="/scripts/lib/require.js">

我有一个共同的构建步骤和每个页面的构建.这样,大多数JS都会针对每个页面进行缓存.

是否可以使用browserify做类似的事情？这样的缓存是否值得,或者将所有页面中的所有内容捆绑到一个文件中更好(考虑到可能只有一个页面可能依赖于大型外部库)？

我正在建立一个网络应用程序,我开始了解并喜欢Browserify.但有一件事让我感到烦恼.

我正在使用一些需要在旧版浏览器中进行填充/填充的ES6功能,例如es6-promise和object-assign(npm上的软件包).

目前我只是将它们加载到需要它们的每个模块中:

var assign  = require('object-assign');
var Promise = require('es6-promise');

我知道这绝对不是要走的路.它很难维护,我想透明地使用ES6功能,而不是通过要求"依赖"它们.

加载这些垫片的最终方法是什么？我在互联网上看到了几个例子,但它们各不相同.我可以:

• 从外部加载它们:

  var bundle = browserify(); 
  bundle.require('s6-promise');
  // or should I use it bundle.add to make sure the code is runned???
  

  Run Code Online (Sandbox Code Playgroud)

  我在这里遇到的问题是我不知道模块将在浏览器中加载哪个顺序.因此,在需要polyfilled功能的呼叫站点上可能尚未发生填充.

  这还有一个额外的缺点,即后端代码无法从这些polyfill中受益(除非我遗漏了一些东西).

• 使用browserify-shim或类似的东西.我真的不明白这对ES6功能有何用处.

• 手动设置polyfilling:

  Object.assign = require('object-assign');
  

  Run Code Online (Sandbox Code Playgroud)

我正在使用browserify并试图让它跳过浪费时间,包括或解析require我通过CDN加载的jquery和其他无文件.

我应该使用bundle.exclude('jquery')或bundle.external('jquery')？有什么不同？他们的输出似乎相同,我不清楚这些文档:

• b.external:https://github.com/substack/node-browserify#bexternalfile

防止将文件加载到当前包中,而是从另一个包中引用.

如果file是一个数组,则文件中的每个项目都将被外部化.

如果file是另一个bundle,那么当文件包捆绑在一起时,将从当前bundle读取并排除该bundle的内容.

• b.exclude:https://github.com/substack/node-browserify#bexcludefile

防止文件中的模块名称或文件显示在输出包中.

如果您的代码尝试require()该文件,它将抛出,除非您提供了另一种加载它的机制.