标签: browserify

我正在尝试浏览我的反应应用程序以使用gulp和envify来设置NODE_ENV.所以我可以在控制台中删除反应警告,错误报告,甚至我的代码来禁用一些功能,例如react-addons-perf的要求.

它工作得很好.当我在app.js中搜索"生产"时,看看是否有这些典型的条件:

if("development" !== "production") {
    ...
}

没有什么,所以,正如我所说,它似乎运作良好.

但是,我仍然可以看到chrome的DevTools选项卡与所有反应组件的反应,就像我在开发网站上一样.如何在chrome的开发工具中禁用此选项卡？

这是我的gulp任务:

var production  = process.env.NODE_ENV === 'production' ? true : false;
var environment = process.env.NODE_ENV ? process.env.NODE_ENV : 'dev';

...

var bundler = browserify({
    debug: !production,

    // These options are just for Watchify
    cache: {}, packageCache: {}, fullPaths: true
})
.require(require.resolve('./dev/client/main.js'), { entry: true })
.transform(envify({global: true, _: 'purge', NODE_ENV: environment}), {global: true})
.transform(babelify)
.transform(reactify);

var start = Date.now();
bundler.bundle()
    .on('error', function (err) {
        console.log(err.toString());
        this.emit("end");
    })
    .pipe(source('main.js'))
    .pipe(gulpif(options.uglify, …

我的一个依赖项使用以下内容将窗口传递给它的闭包

(function (window) {
   //
})(this)

暂时我可以把它改成更合理的东西,这样它就不会破坏浏览器,但是有一些方法我可以this在浏览器模块中强制一个值吗？

我是Browserify的新手,我正在努力弄清楚如何使客户端需要下载的效率更高.

我有一个Web应用程序,它使用许多不同的第三方库和自定义代码.使用Browserify,似乎人们建议将一切都包装成一个大的一般方法bundle.js.由于以下几个原因,这对我来说似乎非常低效:

例如,让我们说你的bundle.js包含lib1, lib2, lib3, customLib.

1. 如果您的网络应用程序的一部分只需要lib1客户端仍然必须下载巨大的bundle.js,它最终不使用75%的.已下载浪费的字节.不必要地增加了页面加载时间.
2. 如果您customLib是经常迭代的代码,那么每次更改时,您的客户都必须重新下载bundle.js,再次下载大量未更改的第三方库...

您的网络应用程序的其他部分可能会使用lib2,lib3但客户端可能会或可能不会去那里,他绝对浪费带宽下载整个bundle.js.

我已经看到了将捆绑包分成多个捆绑包的建议.但到底是什么？如果一个页面使用lib1,其他页面使用lib1,并lib2和另一个页面使用lib2和lib3,那么你如何分割它呢？你把它分成多个捆绑包的次数越多,你是不是会摆脱优势bundle.js？

Browserify似乎受到高度重视,所以我希望我在这里错过了一些东西.将许多库和自定义脚本捆绑在一起的正确方法是什么？人们将Browserify称为"脚本加载器",但我过去看过的每个脚本加载器(如yepnope等)都使用逻辑来确定要下载的脚本,这似乎是一个更有效的解决方案,而Browserify似乎希望客户端能够下载一切......

我正在使用reactify(一个browserify转换https://github.com/andreypopp/reactify)将JSX转换为常规JS.我已经设置了一个gulp任务:

gulp.task('reactifyes6', function () {
    var bundler = watchify(browserify(watchify.args));
    return bundler.add('./Scripts/Widget/ReactComponents/Dashboard.jsx')
    .transform('reactify',{harmony:true, es6module:true})
    .bundle()
    .pipe(source('Dashboard.js'))
    .pipe(gulp.dest('./Scripts/Widget/Build/'));
});

为了让这个工作,我有两个文件:Dashboard.jsx和someJS.js.
Dashboad.jsx

import myFunc from './someJS.js';
myFunc();

someJS.js

export default function () { console.log('test'); };

当我执行gulp任务时'reactifyes6',我得到了一个ReactifyError "Illegal import declaration while parsing file: [path to my file]"

我做错了什么,我怎么能编译ES6导入/导出语法？

我在gulpfile.js中有以下设置:

gulp.task('browserify', function() {
    browserify(config.paths.browserifyEntry)
        .transform(reactify)
        .bundle()
        .pipe(source('master.js'))
        .pipe(gulp.dest(config.paths.dist))
        //.pipe(connect.reload());
});

gulp.task('watch', function () {
    gulp.watch(config.paths.components, ['browserify']);
    gulp.watch(config.paths.sassSource, ['sass']);
});

这一切都很有效,直到我编写的代码导致浏览器出错.这种情况经常发生,因为我在一个文件中编辑代码,这取决于我还没有在另一个文件中进行的更改,浏览器出错.

问题是当浏览器出错时,它结束了监视任务.我希望当浏览器出错时,它根本无法完成它的任务,但是手表会继续,以便当我进行其他更改以使browserify成功运行时,它会这样做.进行更改然后重新加载浏览器并发现当代码处于错误状态时,由于浏览器化错误导致监视进程结束,这是有问题的.

有没有办法吞下这个错误,以免它停止监视过程？或者是否有另一个npm软件包可以监视文件并且不会因browserify错误而被绊倒？

我正在尝试获取测试的覆盖率报告,但所有文件的覆盖率输出始终在一行上,显示带有文件路径的require.例如...

然而,测试运行良好.这是一个反应项目,因此我必须在文件和预处理器中包含一些额外的路径以使测试运行.

我不确定我的业力配置是否有问题？这就是我的配置目前的样子......

/* global module */
module.exports = function (config) {
    'use strict';
    config.set({
        autoWatch: true,
        singleRun: true,

        frameworks: ['browserify', 'jasmine'],

        files: [
            'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
            'node_modules/react/react.js',
            'src/**/*.jsx',
            'src/**/!(*spec).js'
        ],

        browsers: ['PhantomJS'],

        preprocessors: {
            'node_modules/react/react.js': ['browserify', 'sourcemap'],
            'src/**/*.jsx': ['browserify', 'sourcemap', 'coverage'],
            'src/**/!(*spec).js': ['browserify', 'sourcemap', 'coverage'],
        },

        browserify: {
            debug: true,
            transform: [ 'babelify' ]
        },

        reporters: ['progress', 'coverage'],

        coverageReporter: {
            instrumenters: {isparta: require('isparta')},
            instrumenter: {
                'src/**/*.js': 'isparta',
                'src/**/*.jsx': 'isparta'

            },
            reporters: [
                {
                    type: 'text-summary',
                    subdir: normalizationBrowserName
                },
                {
                    type: 'lcov', …

我越来越厌倦试图让节点库一起正常工作,但这是工作的一部分,所以这里就是这样.

我有一个用于浏览器的ES6应用程序.我的文件有一组单元测试,当我的应用程序是用ES5编写时,我正在调试.我使用Browserify处理导入/导出模块并捆绑我的发行版.这在浏览器中运行应用程序时工作正常.我可以成功浏览源文件和规范文件并运行测试,测试通过.我非常接近这个工作.

唯一的问题是报道.我最接近的是显示karma-browserify生成的文件的覆盖范围,每个文件看起来像这样:

require('/absolute/path/to/the/corresponding/file.js');

并且所有文件的覆盖率显然为100%,因为每个文件只有一行.

这是我的karma.conf.js:

import babelify from 'babelify';
import isparta  from 'isparta';
import paths    from './paths';

var normalizeBrowserName = (browser) => browser.toLowerCase().split(/[ /-]/)[0];

export default function(config) {
    config.set({
        basePath: '..',
        browsers: ['PhantomJS'],
        frameworks: ['browserify', 'jasmine'],
        files: paths.test.files,
        preprocessors: {
            'app/**/*.js': ['browserify', 'sourcemap', 'coverage'],
            [paths.test.testFiles]: ['babel'],
        },
        plugins: [
            'karma-babel-preprocessor',
            'karma-browserify',
            'karma-coverage',
            'karma-jasmine',
            'karma-junit-reporter',
            'karma-phantomjs-launcher',
            'karma-sourcemap-loader',
        ],
        autoWatch: false,
        colors: false,
        loggers: [{ type: 'console' }],
        port: 9876,
        reporters: ['progress', 'dots', 'junit', 'coverage'],
        junitReporter: {
            outputFile: paths.test.resultsOut,
            suite: '', …

我正在开发一个关于React的网站,我正试图bundle通过browserifythrouhg 来生成gulp

这是我的gulpfile:

var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var babel = require('babelify');
var gulp = require('gulp');
var util = require("gulp-util");
var log = util.log;
var path = require('path');

function compile(watch) {
    var bundler = watchify(browserify('./app.js', { debug: true }));

    function rebundle() {
        bundler.bundle()
            .on('error', function(err) { console.error(err); this.emit('end'); })
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true …

我正在同时处理两个Node包,我们称之为Library和Consumer.Library负责在浏览器中呈现大量内容.消费者所做的就是import Library from 'library'打电话Library(someConfigHere)- 它基本上只是一个测试,以确保库在浏览器中做我期望的事情.

我已经将npm linkLibrary编辑为Consumer并且我正在尝试在Consumer上运行Browserify,但是我收到了这个错误:ParseError: 'import' and 'export' may appear only with 'sourceType: module'.库确实包含ES6 export语句,所以我猜测Browserify只针对Consumer而不是Library运行.

所以我的问题是:有没有办法强制Browserify转换依赖项？

这是我的package.json:

{
  "name": "consumer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "budo index.js --port $PORT",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babelify": "^7.3.0",
    "browserify-shim": "^3.8.12"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }, …

我正在尝试制作一个浏览器端的Imgur模块,但是NPM上的imgur模块在需要另一个模块时遇到了一些问题.

Error: Cannot find module './C:/Users/*******/AppData/Local/Yarn/config/global/node_modules/is-buffer/index.js' from 'D:\Projects\********\node_modules\http-signature\lib'

正如您所看到的,它正在尝试从中获取模块./C:/...,但由于C:CWD中没有目录,因此无法找到任何内容.

有可能解决这个问题吗？