标签: browserify

我见过一些允许为浏览器编译CommonJS/Node.js模块的节点模块.到现在为止我发现:

• browserify
• 下摆
• 缝
• browserbuild
• VOLO
• 卡洪

我目前正在使用browserify,我注意到300的一些开销？编译时的行.应该让我切换的那些工具之间是否有明显的差异？或者你现在有更好的工具吗？

我有一个我想在客户端和服务器端使用的库.但是,因为request与browserify不兼容,所以在使用browserify进行编译时,我需要使用另一个名为的库browser-request

if (inNodejsRuntime) {
  var request = require('request');
} else if (isBrowserifyRuntime) {
  var request = require('browser-request');
}

如何检测浏览器何时运行以及何时进入节点内部

背景:我正在将2个依赖的TypeScript文件编译为js,它使用tsc 1.0生成源映射(每个文件一个源映射)

我正在使用-m commonjs然后使用browserify生成单个bundle.js

但是我注意到我在bundle中得到了两次原始的源映射引用,这似乎不起作用.

传球--debug似乎也没有成功.

我有一个感觉这个问题:https://github.com/substack/node-browserify/issues/325有点相关,但我无法弄清楚问题是如何解决的.

另外建议使用https://github.com/substack/browser-pack,但我还是不完全了解如何使用它,它是否取代了browserify？

最重要的是,我想合并2个js文件,但是使用browserify将js"合并"到ts源地图.那可能吗？

我正在使用Browserify捆绑ReactJS应用程序.

我的所有组件都包含require("react")在顶部.这导致在我的包中Browserify包含ReactJS源.但我想排除它.

我怎么做？这是正确的做法吗？

我是Browserify(以及一般的Javascript构建系统)的新手,并且已经达到了我彻底困惑的程度.

我有Gulp设置来做我的构建,它一直工作正常,最近我一直在使用Browserify捆绑 - 主要是因为我可以将我的代码分成单独的文件和require()他们需要的地方.

我的问题是,我有一个文件夹,其中有一些我需要在另一个模块中需要的小模块,我试图避免硬编码所有这些模块的名称.有没有办法要求所有文件？

我尝试过使用Bulkify和Folderify但无法让它们工作.例如,使用Bulkify,安装的软件包称为bulkify,位于node_modules文件夹中,但随后它们会告诉您需要bulk-require,它位于bulkify软件包的sub node_modules文件夹中.当我尝试时,Browserify会出现Cannot find module 'bulk-require'...类型错误.

此时我很困惑,因为我不知道为什么这两个的安装方向都不起作用(也不管他们是否会帮助我).我应该在我的Gulp文件中使用它们吗？或者我可以在我的一个模块中使用它们,它会在Browserify期间被调用吗？

如果这有帮助,这是我的构建任务的片段:

// Report Builder
gulp.task('script-builder', function() {

    // Unminified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/debug'));

    // Minified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); …

我正在尝试创建一个非常痛苦的NPM模块:react-smallgrid

import React from 'react';
import _ from 'lodash';


export default class SmallGrid extends React.Component{

编译:

browserify: {
    options: {
        transform: [
            ['babelify', {
                presets: ['react', 'es2015']
            }]
        ]
    },

    jsx: {
        files: {
            './dist/js/smallgrid.js': [
                './src/smallgrid.jsx',
            ]
        }
    },

当我js在另一个项目/ jsx中导入文件并尝试浏览它时,它会给出错误:

错误:无法从'/ Users/me/code/react-smallgrid/dist/js'找到模块'./ReactMount'

我以为它已经编译好了吗？我不明白这一点.

与此同时

我尝试使用webpack构建它,它提供以下输出:

> webpack -p

Hash: 00fd87c95d39230bd485
Version: webpack 1.12.11
Time: 14002ms
       Asset    Size  Chunks             Chunk Names
smallgrid.js  248 kB       0  [emitted]  smallgrid
    + 160 hidden modules

WARNING in smallgrid.js from UglifyJs …

我发现移动文件并不断重写文件包含相对于新文件夹的路径时会很痛苦.

我想在我的browserify代码中避免这种情况:

var View = require('../../../../base/view');

并且做一些更符合requirejs的事情,它知道我的基本路径是js:

var View = require('base/view');

我是整个浏览器的新手.我一直在尝试使用browserify + reactify + gulp来转换,缩小和组合React应用程序.只要我有一个单一React.createClass的module.exports = MyComponent一切都工作正常.由于我有几个共享组件,我物理托管在同一个文件中并在项目中重用,我想导出多个组件.我试过一个数组:

module.exports = [Component1, Component2]

并且还尝试了具有多个属性的对象:

module.exports = {Comp1: Componenet1, Comp2: Component2}并且还尝试在createClass对象中嵌入调用,但这没有帮助.

有没有办法做到这一点,还是我必须将每个组件拆分成一个单独的JSX文件？

我们正在开发一个有助于在AWS Lambda中部署和维护代码的项目/框架.我想构建/捆绑lambda函数的所有node.js代码到一个js文件中,因为:

• 较小的代码库有助于lambda冷启动问题
• Lambda的代码zip大小限制为50MB

我们不想创建自定义捆绑器来执行此操作,因为已经存在许多选项(systemjs,browserify,webpack等).然而,我们担心某些节点模块与捆绑器/构建器不兼容的问题.

特别aws-sdk是webpack存在已知问题,说它有浏览器支持,但我已经和浏览过aws-sdk问题的人交谈了

我们想选择一个现有的捆绑器(或2),但我们希望确保它适用于尽可能多的模块/代码.我们正在尝试为JAWS创建一个插件生态系统,所以要做到这一点非常重要(不要因为模块X使用它们而不能捆绑人员).

问题:

1. 我如何进行捆绑/构建以满足这些约束？
2. 我们可以向产品的消费者提供任何指导方针,以确保他们编写/使用的代码能够捆绑吗？例如:动态require()导致问题AFAIK.

如何设置karma测试运行器以生成打字稿项目的代码覆盖率报告？

鉴于以下文件夹结构和karma.conf.js文件,我已经在使用karma来运行用TypeScript编写的测试.

我已经与周围的摆弄karma-coverage和remap-istanbul,但没有任何运气呢.如果可能的话,我想在没有任何额外的情况下这样做npm scripts.

.
??? karma.conf.js
??? package.json
??? src
?   ??? add.ts
??? test
?   ??? addSpec.ts
??? tsconfig.json
??? typings
?   ??? globals
?   ??? index.d.ts
??? typings.json

karma.conf.js

var istanbul = require('browserify-istanbul');

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon', 'browserify'],
    files: [
      'test/**/*Spec.ts'
    ],
    exclude: [
    ],
    preprocessors: {
      'test/**/*Spec.ts': ['browserify']
    },
    browserify: {
      debug: true,
      plugin: ['tsify'],
      transform: [
        istanbul({irgnore: ['**/node_modules/**']})
      ]
    },
    reporters: ['progress', …