标签: browserify

在开发中,我在我的Express服务器上使用Coffeescript和Browserify中间件来提供我的客户端JS,如下所示:

app.use browserify mount: '/client.js', entry: './client.coffee', watch: yes

今天我升级了我的依赖项并在browserify v2网站上注意到了这一点:

在browserify中最糟糕的想法之一,用于托管捆绑包的ad-hoc http服务器中间件终于消失了.

咖啡脚本的默认支持消失了.您仍然可以在程序中使用coffee脚本,您只需要编译为js或者自己将源转换挂钩到bundle管道中.

请记住,如果你不同意我期望很多人会做的这些削减,那么通过v2重构,你可以更容易地展示自己对于浏览器应该如何使用底层新库作为起点的看法.

很公平.

唯一的问题是,我已经阅读了新API的文档,而且我实际上如何实现自己的中间件有点不知所措.事实上,我甚至不能得到一个基本的单机例如使用工作browserify.add()和browserify.bundle(),更不用说作为快递中间件.

我可以继续使用v1,但由于这个项目仍处于开发阶段,我想让我的依赖项保持最新.任何建议都非常感谢.

更新:

我到目前为止:

browserify = require 'browserify'
coffee = require 'coffee-script'
through = require 'through'

app.get '/client.js', (req, res) ->
  b = browserify()
  b.add './client.coffee'
  b.transform (file) ->
    write = (buf) ->
      data += buf
    end = ->
      @queue coffee.compile(data)
      @queue null
    data = ''
    return through(write, end)
  b.bundle {}, (err, src) ->
    res.send src

这是有效的,除了我曾经说过require './module'我现在必须这样做 …

我想要包含一个环境变量或我的模块可以访问条件流的文件.

// contains env build specific data
// or value 'develop' || 'production'
var env = require('config');

我知道我可以访问CL参数yargs很好,但我似乎无法找到一种方法来获取我的browserify构建参数.

var bundleStream = {
  cache: {},
  packageCache: {},
  fullPaths: false,
  entries: [filename],
  extensions: config.extensions,
  debug: config.debug,
  paths: ['./node_modules', './app/js/'],
  require: ['jquery', 'lodash']
};

var bundle = function() {
  bundleLogger.start(filename);
  return bundleStream
    .bundle()
    .on('error', handleErrors)
    .pipe(source(filename.replace('-app', '-bundle')))
    .pipe(gulp.dest(process.cwd()))
    .on('end', reportFinished)
    .pipe(browserSync.reload({
      stream: true
    }));
};

我一直在使用phantomjs在服务器端dom环境中为我做一些繁重的工作.直到现在我一直把数据结构放在内存中(即对它们没什么特别的),一切都很好.但最近在一些用例中我开始遇到以下问题:

1. 内存使用率变得太高,导致交换启动并严重影响我的性能.
2. 无法从上一个保存点恢复,因为内存中的数据结构不是持久的(显然)

这迫使我寻找一个用于幻像的数据库解决方案,但在决定解决方案时我又遇到了问题:

1. 我不希望我的表演太受影响.
2. 它必须是持久的和可查询的
3. 我怎么能从幻像脚本里面连接数据库.

谁能引导我找到满意的解决方案？

注意:我几乎已经决定,sqlite但从幻影连接到它仍然是一个问题.Nodejs提供sqlite3节点模块,我正在尝试browserify使用幻像.

注意注意: Browserify没有用!回到地面零!:-(

Thanx提前!

我正在尝试使用Browserify来加速我的Gulp工作流程.我正在关注此博文:http: //christianalfoni.github.io/javascript/2014/08/15/react-js-workflow.html

我有一切正常,变化最初非常快(500毫秒左右).

但是,每次保存文件时,此时间都会增加.我的任务:

gulp.task('browserify', function() {

var bundler = browserify({
    entries: ['./src/js/app.js'],
    debug: production,
    cache: {},
    packageCache: {},
    fullPaths: true
});

var watcher = watchify(bundler);

return watcher
    .on('update', function() {

        var updateStart = Date.now();

        function transform(next) {
          console.log('JavaScript changed - recomiling via Browserify');
          watcher.transform(babelify).bundle()
          .pipe(source('bundle.js'))
          .pipe(gulp.dest('./build/scripts'))
          .on('end', next);
        }

        transform(function() {
          gulp.start('usemin');
          console.log('Complete!', (Date.now() - updateStart) + 'ms');
        });

    })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./build/scripts'));

所以在第一次构建时,大约需要3秒钟(这包括一个文件).

然后,在文件更改时:

JavaScript changed - recomiling via Browserify
[11:31:24] Starting 'usemin'...
Complete! 608ms …

ES6模块允许我们创建可以作为依赖项导出和导入的代码模块.

Browserify和Webpack做同样的事情.所以我正确地假设如果我使用ES6和像babel这样的东西来转换我的代码那么webpack和browserify是不是需要？

我开始打破一个Javascript客户端库,index.js并有一个额外的文件,我现在正在require顶部做一个.

...
require("./other_file")
...

然后我gulpfile.js看起来像这样:

function compile(watch) {
  var bundler = watchify(browserify({
    entries: ['./src/index.js'],
    debug: true,
    sourceType: module,
  })
  .transform(babelify));

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

  if (watch) {
    bundler.on('update', function() {
      console.log('-> bundling...');
      rebundle();
    });
  }

  rebundle();
}

我不确定我是否应该使用concat我需要的所有文件,然后浏览更大的concatted文件或只是browserify主文件,它require会起作用吗？

(我在这里遵循gulpfile示例)

我创建了一个新项目

一世 npm install -g browserify

我使用cmdline进行了测试browserify app.js > bundle.js.凉.

我想缩小,所以我 npm install uglifyify --save-dev

我使用cmdline进行了测试browserify -g uglifyify app.js > bundle.js.大.

现在我想用代码做这个,但我明白了 Error: Cannot find module 'browserify'

这是我的代码,基本上是替换cmdline

var browserify = require('browserify')
var fs = require('fs')

var bundler = browserify('./app.js')

bundler.transform({
    global: true
}, 'uglifyify')

bundler.bundle()
    .pipe(fs.createWriteStream('./bundle.js'))

看来我需要再次在本地安装browserify到这个项目？

我正在制作一个简单的烧瓶应用程序,使用反应为前端的东西.现在我正在尝试从其他文件导入React组件,但没有成功.这是我得到的错误:

Uncaught ReferenceError: require is not defined

这是我的html文件:

<html>
<head>
    <meta charset="UTF-8">
    <title>Index page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
    <div class="columns">
        <div class="column">
            some stuff
        </div>
        <div class="column">
            <div id="index"></div>
        </div>
    </div>
    <script type="text/babel" src="static/js/index.js"></script>
</body>
</html>

和我的index.js:

import FormComponent from './FormComponent.js';

var MainClass = React.createClass({
  render:function(){
    return (
      <div>
        <div>this is the main component</div>
        <div><FormComponent /></div> …

在博客文章中,作者提到Electron将Node和Chromium组合成一个"单一上下文",这意味着我们不必使用Browserify来转换代码.

我理解Electron的一个含义是您可以使用Web技术构建跨平台桌面应用程序.我也理解为什么我们能够写入文件系统的原因是因为Electron已经将Node编入其中.而且,我们能够使用HTML/CSS/JS/DevTools的原因是因为Chromium被烘焙了.但是,我不要以为这是作者所说的.

• Electron如何将Node和Chromium组合成"单一环境"？
• 为什么不再使用Browserify？

我在lodash上使用browserify并发现lodash构成了浏览器的重要组成部分bundled.js.

我导入了整个lodash,但cloneDeep到目前为止我主要使用这个方法.

var lodash = require('lodash');

我怎样才能只导入lodash的必要部分以保持bundled.js小？我正在使用node.js v6