标签: browserify

我经历了很多文章上阅读Browserify一样http://javascriptplayground.com/blog/2013/11/backbone-browserify/并且总有一个步骤,如下图所示:

$ browserify app/app.js | uglifyjs > app/bundle.js

这似乎是在您在浏览器中运行脚本以查看其工作原理之前完成的.有没有办法不不必做建立每个更改代码的时间？与......中的define()功能类似的东西requirejs

我正在尝试使用rails资产管道实现一些事情,这比我希望的更难.

为了干净地构建应用程序,我计划为javascript使用模块系统.为此,我想使用CommonJS模块,但我想使用新的ES6语法编写它们以便将来兼容.

我找到了资产管道的ES6模块转换器扩展,它运行良好,但这只能将其转换为CommonJS格式.我仍然需要将此解析为浏览器所理解的JS.为此,我正在寻找使用Browserify但我的问题在于结合这两个.

模块转换器基于每个文件工作,但browserify通过检查所需的所有文件来工作.问题是browserify不能使用原始文件,因为它们不是CommonJS格式,它们在ES6中,所以它需要转换后的版本,但是因为这发生在管道中,我不能指向浏览器化文件.

这有什么办法吗？

我正在努力使用Browserify和文档就绪事件.如何创建一个模块,用于导出仅在文档就绪事件触发后可用的内容？我如何依赖这样的模块？

我的第一个尝试是尝试异步设置module.exports - 开箱即用.我的下一个问题就是模块返回一个接受回调的函数,并在文件准备好时触发调用.第三次尝试回复了承诺.这似乎使依赖模块不是非常模块化的,因为现在依赖的模块及其依赖性(以及它们,乌龟一直向下)也必须利用这种模式.

使用Browserify和文档就绪事件有什么好的模式？

我在使用带有Angular 2的RxJS时遇到了问题.从Typescript定义文件中建议的大多数方法都没有在我的Observable对象上定义,比如......

然后我想通了,Observable原型上不存在方法.

我知道很多东西从版本4改为5,所以我想念一些东西吗？

Browserify为我添加了...

每次源文件发生变化时,我都会尝试连接gulp-browserify并gulp-watch重建我的软件包.但是,gulp-browserify需要单个入口点进行编译(例如src/js/app.js)并获取每个依赖项本身:

gulp.src('src/js/app.js')
    .pipe(browserify())
    .pipe(gulp.dest('dist'))

但是,gulp-watch由于只有正在监视入口点文件,因此无法在每次更改时重建.我真正需要的是可以观察多个文件,然后只处理入口点文件(寻找replaceEverythingWithEntryPointFile):

gulp.src("src/**/*.js")
    .pipe(watch())
    .pipe(replaceEverythingWithEntryPointFile()) // <- This is what I need
    .pipe(browserify())
    .pipe(gulp.dest("dist"));

所以问题是:我如何指向gulp-browserify入口点文件并在任何源文件的更改中触发重建？如果解决方案包括限制,那将是很好的:当启动时,每个源文件都被设置用于观看,因此我们的入口点文件将被管道传输到gulp-browserify文件的次数,这是不必要的.

在版本2.0.2中grunt-browserify,browserify-shim已从模块本身中删除并转换为用作a transform,而不是直接option执行grunt-browserify任务.

使用垫片的旧版本grunt-browserify看起来如此:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        shim: {
            angular: {
                path: path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js'),
                exports: 'angular'
            }
        }
    }
}

这很好用,并在libs.js模块周围生成一个包装器:

require=(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({"angular":[function(require,module,exports){
    module.exports=require('i10PRm');
},{}],"i10PRm":[function(require,module,exports){
    (function(global){(function browserifyShim(module, exports, define, browserify_shim__define__module__export__) {
        browserify_shim__define__module__export__(typeof angular …

我刚开始使用React.我没有任何问题地浏览了CommentBox教程.但是框架没有为组织JS文件或为SPA编译单个缩小的JS文件提供太多/任何指导.我已经知道框架是灵活的,并没有强制执行标准,我确信这些问题可能对于在Javascript生态系统中开发的人来说显而易见.

我认为共识是使用Browserify,在文档中有一个指向git starter项目的链接:

https://github.com/petehunt/react-browserify-template

这是一个好的开始,但它仍然只编译一个JS文件"index.js".我阅读了一些browserify手册,我认为我只需要"需要"我的其他文件(这些文件需要自己导出).

所以我修改了index.js看起来像这样:

/** @jsx React.DOM */
var React = require('react');
var pkg = require('./package.json');

var commentBox = require('./comment-box.js');

comment-box.js基本上是一个hello world test:

/** @jsx React.DOM */
var React = require('react');
var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
            Hello, world! I am a CommentBox.
            </div>
            );
    }
});

React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);

module.exports = CommentBox;

如果我运行react-browserify-template的启动目标,它似乎生成了browser-bundle.js:

npm start

但是,如果我尝试构建目标

npm build

...什么都没发生.我将npm的输出更改为详细,我得到以下内容:

npm info it worked if it ends with ok
npm verb …

我有一个场景,我想从客户端将数据导出到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构建的库.该库正确构建,并且在单独使用时工作正常.

现在构建的库在我的vendor /目录中,我尝试在我的新应用程序中要求它:

var myLib = require('./vendors/myLib');

当我尝试浏览我的应用程序时,它抱怨它找不到require该库中的一些内部语句:

Error: Cannot find module '../utils/logger' from '/myApp/vendor'

Browserify似乎试图从错误的目录重新构建lib.我怎样才能解决这个问题？

更多细节:

lib看起来像这样:

myLib
 ?  app.js
 ?
 ???models
 ?    model.js
 ?
 ???utils
      logger.js

应用程序requires模型和模型requires记录器使用require('../utils/logger').

然后将其构建到myLib.js(browserify app.js --standalone myLib > myLib.js)中.

到目前为止,非常好,myLib工作正常.

In my new application, I put myLib.js in the /vendor directory, require it as listed at top, and get the error that Browserify can't find '../utils/logger'.

In this situation I do control …

我有一个带有一些测试的Angular项目.我的版本是用Gulp编写的.我使用Karma运行测试并生成lcov报告.

然后我使用gulp-sonar插件来运行Sonar.我的声纳配置看起来像这样:

"sonar": {
  "host": {
    "url": "http://mysonar.example.com.au"
  },
  "projectKey": "sonar:advertising-test",
  "projectName": "advertising-test",
  "projectVersion": "1.0.0",
  "sources": "app/js",
  "javascript": {
    "lcov": {
      "reportPath": "reports/coverage/lcov.info"
    }
  },
  "exec": {
    "maxBuffer": "1048576"
  }
}

Sonar运行并分析代码,但在尝试使用以下内容读取lcov报告时失败:

[09:38:58] 09:38:58.322 WARN  - Problem during processing LCOV report: can't save DA data for line 0.
java.lang.IllegalArgumentException: Line with number 0 doesn't belong to file app/js/main.js
...    
[09:38:58] 09:38:58.324 WARN  - Problem during processing LCOV report: can't save DA data for line 65.
java.lang.IllegalArgumentException: Line with number 65 …