标签: browserify

尝试使用Browserify在CommonJS模块中实现单例模式.至今:

// foo.js

var instance = null;

var Foo = function(){
    if(instance){
        return instance;
    }
    this.num = 0;
    return instance = new Foo();
}

Foo.prototype.adder = function(){
    this.num++;
};

module.exports = Foo();

// main.js

var foo = require('./foo.js');
console.log(foo.num); // should be 0
foo.adder(); // should be 1
var bar = require('./foo.js');
console.log(bar.num); // like to think it'd be 1, not 0

第一个问题是,maximum call stack exceeded当我在浏览器中加载构建的JS文件时出现错误,但其次,我是否正确地接近了这个？这可能吗？

我正在尝试require使用传递给函数的变量的browserify文件:

var playersOptions = {
    name: 'players',
    ajax: 'team-overview',
    route: {
        name: 'overview',
        path: 'playersOverview',
        url: 'playersoverview'
    }
 };

var BackboneView = require(playersOptions.route.path); 
//Error: Uncaught Error: Cannot find module 'playersOverview'

var BackboneView = require('playersOverview');
//Requires the file without any problems.

我很困惑为什么会失败？当它们都是字符串时怎么能找不到模块？

我目前有这个factor-bundle命令,我用它来捆绑我的文件,并将所有常见的东西拉到一个公共文件中:

browserify index.js bar-charts.js list-filter.js dashboard.js 
  -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] 
  -o ../../static/js/common.js

我以前也使用此命令来uglify单个文件:

 browserify index.js | uglifyjs > ../../static/js/index.min.js

如何在同一个命令中将文件与文件组合在一起factor-bundle并将其缩小uglifyjs？

我在因子包文档中找到了这个例子,但我真的不明白如何适应它.

(如果效果更好,我也可以使用两个命令.我只想最终得到缩小和组合的文件!)

我正在尝试使用带有jQuery的Bootstrap.我正在使用Browserify和Babel变换进行编译.我收到以下错误.

Uncaught ReferenceError: jQuery is not defined

我试过导入这样的包,但是我得到了上面的错误.

import $ from 'jquery';
import Bootstrap from 'bootstrap';

搜索周围,我找到了这个答案,所以我尝试了这个,但我仍然得到同样的错误.

import $ from 'jquery';
window.$ = window.jQuery = $;
import Bootstrap from 'bootstrap';
Bootstrap.$ = $;

我是否使用ES6错误地导入这些软件包,还是以不同的方式完成？我尝试的最后一件事是导入没有ES6的软件包,但是我仍然遇到了同样的错误.

window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap');
Bootstrap.$ = $

这是我第一天做节点,我在尝试捆绑一些js文件时遇到了一些问题.

MyFolder
|-- app (folder)   
|  |-- Collections (contains: movies.js)   
|  |-- Models (contains: movie.js)  
|  |-- node_modules  
|-- main.js  
|-- node_modules (folder)    
|-- static (folder)  

这是我要压缩成static/bundle.js的js文件的内容

 // app/models/movie.js  
 var Backbone = require("backbone");
 var Movie = Backbone.Model.extend({
   defaults: {
     title: "default",
     year: 0,
     description: "empty",
     selected: false
   }
 });
 module.exports = Movie;

 // app/collections/movies.js  
 var Backbone = require("backbone");
 var Movie = require('models/movie');
 var Movies = Backbone.Collection.extend({
      model: Movie
 });
 module.exports = Movies;

当我运行browserify -r ./app/main:app > static/bundle.js文件时,使用app/main.js中的脚本创建bundle.js.它按预期工作.

但是当我运行时 …

我使用browserify和watchify,并想require()比默认扩展名的其他文件.js,并.json没有指定扩展名,比如:

// Not ideal (tedious)
var Carousel = require('./components/Carousel/Carousel.jsx')

// Ideal
var Carousel = require('./components/Carousel/Carousel')

我曾尝试--extension=EXTENSION为在指定browserify文档:

"scripts": {
  "build": "browserify ./src/App.js --transform [ reactify --es6 ] > dist/script.js -v -d --extension=jsx",
  "watch": "watchify ./src/App.js --transform [ reactify --es6 ] -o dist/script.js -v -d --extension=jsx"
},

但是我没有看到任何变化.这可能吗？这样做的正确方法是什么？

我创建了一个gulp任务,用于使用browserify捆绑模块,我使用watchify来监视更改.以下是watchify的gulp任务:

gulp.task('watch:browserify', function () {
    var opts = assign({}, watchify.args, {
        entries: ['./js/app.js'],
        debug: true,
        basedir: './app/',
        paths: ['./lib']
    });

    var b = watchify(browserify(opts));

    b.on('update', function () {
        bundle();
    });

    function bundle() {
        gutil.log(gutil.colors.blue("Starting Browserify..."));
        var time = Date.now();
        return b.bundle()
            .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error')))
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('app'))
            .on('end', function () {
                var duration = Date.now() - time;
                gutil.log(gutil.colors.blue('Finished Browserify') + " (%dms)", duration);
            })
    }

    bundle();
});

如果我编辑主js文件(./js/app.js),则始终检测到更改.但是,当我编辑主文件所需的其他文件时,大致每隔一段时间(但并非总是)检测到更改.我在这里做错了吗？

这是完整的Github回购,所以也许你完全了解我如何计划这个工作

假设我有一个源代码不是ECMA 5的模块(例如它的Coffescript或Typescript或其他),并以编译的形式与源映射一起分发.如何在Browserify包中包含此源地图？

例如,想象一个具有单个依赖项的项目:

index.js
    node_modules
         typescript_module
              (main.ts)
              dist
                  main.js
                  main.js.map

browserify不使用"main.js.map".也就是说,browserify包源地图映射到"main.js"而不是推迟到描述"main.ts"的原始地图

对于大多数变换,有一种方法可以输入前一步生成的源地图,但是当源地图已经存在时,有没有办法在原始输入文件上保留它们？

我试图使用新的babel版本,并且在尝试使用es2015预设的babel时似乎无法理解箭头功能？

我在pre-babel6上的设置如下:

transform: [['babelify', {sourceMap: false, stage: 0, optional: 'runtime', ignore: ["*.min.js"]}]]

和babel6

transform: [['babelify', {"presets": ["es2015"]}]]

这不起作用.为什么是这样？

编辑

添加"stage-0"摆脱了语法错误消息,但已使我无法通过错误扩展任何内容:'this' is not allowed before super()当我有一个实际的super()调用.

编辑

用一些es7设置一个简单的测试应用程序并试图使用babel-core require hook,同样的问题.

编辑

好的,所以我把它缩小到0级,在babeljs 6 ^中工作方式不同.

这是我注意到的:

运行文件

require("babel-core/register")(
    {
        presets: ["es2015", "stage-0"]
    }
);

require("./app.js");

适用于:

class extendable {
    constructor() {
        console.log('extended')
    }
}

class app extends extendable {

    constructor() {

        super();

        this.method();
        this.method2();
    }

    method() {
        // arrow functions
        setTimeout(() => {
            console.log("works")
        }, 1000) …

最近我一直在玩react.js,我喜欢我可以开发工作UI组件的速度.我现在已经创建了很多组件,我想在不同的.jsx文件中分发一些组件.

我读过的每件事都说我每次搬到生产时都应该使用像browserify或webpacker这样的捆绑器.但是我反对这个想法.我喜欢在javascript中开发的部分原因是因为它是一种脚本语言而且没有编译器可以解决这个问题.如果我想搞乱构建链等,我可能只是在c中进行开发工作.

我主要制作工程工具.这涉及制作工具,然后让其他工程师和操作员使用.我可能不会在一两年后再看一个工具.我希望当我确实需要再次查看它或者跟在我后面的人需要查看它时,他们可以直接进入源代码并开始进行更改.我不想记得我的构建环境是如何在2016年建立的.

对于我的特定应用程序,我也不关心加载速度或客户端资源.没有人使用手机中的工具,很少重新加载工具.

因此,除非你能说服我确实想要捆绑,否则将单个页面Web应用程序与react.js组件分成多个.jsx文件放在一起的最简洁方法是什么？

更新/改进的问题/部分答案:

我从没有NPM的快速入门示例开始.这是我想要实现的一个简单示例:

index.html的:

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel" src="hello1.jsx"></script>
        <script type="text/babel" src="hello2.jsx"></script>
        <script type="text/babel">
            ReactDOM.render(
                <div>
                    <Hello name='Bruce'/>
                    <Hello2 name='Bruce'/>
                </div>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

hello1.jsx:

var Hello1 = React.createClass({
    render: function() {
        var name = this.props.name;
        var message = 'Hello ' + name;
        return <h1>{message}</h1>;
    }
});

window.Hello1 = Hello1;

hello2.jsx:

var Hello2 = React.createClass({ …