标签: browserify

默认情况下,browserify不会对node_modules中包含的模块执行转换,即不使用路径.

我做了一个快速的github回购,在这里说明了它.获得浏览器化的index.js文件如下所示:

var fs = require('fs');
var testmodule = require('testmodule');
var trg1 = document.getElementById("target1");
var trg2 = document.getElementById("target2");
trg1.innerHTML = fs.readFileSync(__dirname+"/something.txt");
trg2.innerHTML = testmodule();

testmodule 看起来像这样:

var fs = require('fs');
exports = module.exports = function() {
    return fs.readFileSync(__dirname+'/data.txt');
}

使用brfs转换模块,我希望能够内联两个调用fs.readFileSync,但是当我运行时browserify index.js -t brfs -o bundle.js,只有我的主项目中的调用被内联.这是bundle.js的结果:

;(function(e,t,n){function r(n,i){if(!t[n]){if(!e[n]){var s=typeof require=="function"&&require;if(!i&&s)return s(n,!0);throw new Error("Cannot find module '"+n+"'")}var o=t[n]={exports:{}};e[n][0](function(t){var i=e[n][1][t];return r(i?i:t)},o,o.exports)}return t[n].exports}for(var i=0;i<n.length;i++)r(n[i]);return r})({1:[function(require,module,exports){
// nothing to see here... no file methods for …

我正在尝试浏览浏览器,并通过了很多例子.

在一个例子中,我看到'import'的使用:

import 'jquery';

和导入本地文件:

import Header from './Header';

但在其他例子中我看到人们通过以下方式导入

require('./Header');

有什么不同？

我正在考虑将一个基于浏览器的大型代码库移到CommonJS(它是一个用TypeScript编写的AngularJS 1.x应用程序).该应用程序具有循环依赖性,因此我认为RequireJS是不可能的.

Browserify如何处理循环依赖？是否存在不同类型的循环依赖关系？或者使用CommonJS/Browserify处理循环依赖的任何提示？

好吧,这是2016年的WebPack看起来像对一个胜利者requirejs和browserify.我一直在阅读这3种技术,以解决一个非常具体的问题.我希望在我的HTML文件中避免这种情况(AngularJS应用程序的一部分)

<script src="some-file.js"></script>
<script src="some-file2.js"></script>
<script src="some-file3.js"></script>
<!-- Dozens of similar lines here... -->

当然,我的HTML文件中这些行的顺序很重要.Bootstrap将要求jQuery等.

我找到的第一件事是:requirejs.你只需指定这样的东西:

<script src="my-bundled-file.js"></script>

然后,您使用JS解决依赖性问题.更进一步,我在这里发现了两种方法:

• CommonJS(browserify)
• AMD(require.js)

Webpack适用于这两种方法,听起来不错.

最后,3个工具可以用于同一件事:只在一个文件中捆绑几个文件.但我担心的是这些文件捆绑的顺序.

我不想关心这个,看起来像使用这些解决方案(甚至gulp + gulp-concat,就像这里建议的那样),我只是在解决问题:现在,我指定我的应用程序使用的模块JS代码,但我仍然需要以正确的顺序放置模块,即使使用WebPack(这里的示例:require调用必须按正确顺序)

所以,我的问题:

• 我误解了这些工具吗？我只是想解决加载顺序问题,看起来我没有这样做
• 这些工具能否解决一个不同的问题(ES5中缺少原生模块,这会驱使全球范围受到污染)？

我想在我的Angular 2项目中使用libquassel(https://github.com/magne4000/node-libquassel).该库是浏览器化的,所以理论上它应该可以工作,但我不确定如何在我的项目中导入它.

我试着加入我的 typings.d.ts

declare module 'libquassel';

然后导入库

import * as Quassel from 'libquassel';

但我明白了

EXCEPTION: net.Socket is not a function

当我尝试运行我的代码时,我认为这是另一个浏览器嵌入在client/libquassel.js文件中的库.

我该如何使用这个库？

编辑:我会在这里回答所有问题:

• 我的设置是一个简单的角度cli项目.没有华而不实的东西,只是ng new proj1再npm install libquassel --save.
• 我index.html没有任何其他ng new没有放在那里的东西.
• 我尝试用import * as Quassel from 'libquassel'和var Quassel = require('quassel')(和那些的排列)导入库,没有任何运气(错误从变化unknown function 'require'到can't find module lib|quassel).

• 重新制作我的项目的步骤:

  ng new test
  cd test
  npm install libquassel --save
  ng g s …

  Run Code Online (Sandbox Code Playgroud)

我想使用Browserify来捆绑我的文件,但是我需要bundle.js在HTML页面本身上捆绑我的Browserify中的一个模块.目前这是不可能的,因为require页面上没有定义任何功能.

似乎browserify require定义的函数bundle.js是在IIFE中,所以我不能使用它.是否有可能将其排除在全球范围之外require？

<script src="bundle.js"></script>
<script>
  // Require the `app` module inside of `bundle.js`
  var app = require('app');
  app.start();
</script>

我需要这样做,因为我的app.start函数需要传递一些JSON,它只能由服务器端模板呈现.

注意我正在使用Browserify v2.

我使用browserify捆绑前端代码.到目前为止它一直都很棒,但我在混合npm和非npm包时遇到了困难.例如,使用nQuery版本的jQuery和非CJS版本的jQuery插件.

我目前的解决方案是使用browser键入package.json指向jQuery的dist,然后使用browserify-shim它作为插件的依赖项添加它.

有没有比我现在更清洁的方式来做到这一点？

编辑:我目前正在尝试使用npm并package.json管理所有依赖项,所以我不想在这个项目上使用bower.叫我疯了:)

的package.json

{
  "dependencies": {
    "jquery": "~2.1.0",
    "browserify": "latest",
    "browserify-shim": "^3.5.0",
    "jquery-waypoints": "git@github.com:imakewebthings/jquery-waypoints.git",
    "jquery-validation": "git://github.com/jzaefferer/jquery-validation"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-waypoints": "./node_modules/jquery-waypoints/waypoints.js",
    "jquery-validate": "./node_modules/jquery-validation/build/release.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-waypoints": {
      "depends": [
        "jquery"
      ]
    },
    "jquery-validate": {
      "depends": [
        "jquery"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

拉出我的头发寻找一个简单的解决方案,通过NPM,跨多个Browserify或Webpack捆绑包共享代码.思考,有文件"桥"这样的东西吗？

这不是因为编译时间(我知道watchify),而是希望提取出我所有供应商特定的库,vendor.js以便保持我的app.js文件大小并且不会使浏览器崩溃大量的源图.另外,如果需要查看已编译的js,我发现它更清晰.所以:

// vendor.js

require('react');
require('lodash');
require('other-npm-module');
require('another-npm-module');

非常重要的是,代码从NPM加载而不是Bower,或者保存到某个"供应商"目录中,以便通过相对路径导入并通过垫片识别.除了我的实际应用程序源之外,我想通过NPM保留每个库引用.

在app.js我保留所有源代码,并通过externals数组,从编译中排除上面列出的供应商库:

// app.js 

var React = require('react');
var _     = require('lodash');

var Component = React.createClass()

// ...

然后index.html,我需要两个文件

// index.html
<script src='vendor.js'></script>
<script src='app.js'></script>

使用Browserify或Webpack,如何才能app.js"看到"通过npm加载的模块？我知道创建一个带有外部的包,然后node_modules通过别名引用直接文件(比方说),但我希望找到一个更自动且更少"Require.js"的解决方案.

基本上,我想知道是否可以桥接这两个,以便app.js可以查看内部vendor.js以解决依赖关系.这似乎是一个简单,直接的操作,但我似乎无法在这个广泛的网络上找到答案.

谢谢!

在反应文档中,我发现了这种导入PureRenderMixin的方法

var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

如何以ES6风格重写.我唯一能做的就是:

import addons from "react/addons";
let PureRenderMixin = addons.addons.PureRenderMixin;

我希望有更好的方法.

我想用我的JavaScript同时使用Browserify和Babel.为此,我创建了一个gulp任务

gulp.task('babel', function() {
    return gulp.src('_babel/*.js')
        .pipe(browserify({ insertGlobals : true }))
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest('_dev/js'));
});

不幸的是,当我想import在我的代码中使用时,我收到一个错误:

ParseError: 'import' and 'export' may only appear at the top level

我的主要js文件非常简单:

import 'directives/toggleClass';

我猜这是因为巴贝尔(并且是它的use strict补充),但我该怎么办？