标签: browserify

升级到版本后0.14.2,我看到错误和建议使用ReactDOM.render()而不是React.render(),但我从哪里导入它？

当我不导入它并且只是按原样运行时,它会显示为undefined.它是内置功能还是第三方库？

我正在尝试使用gulp和browserify将我的.jsx文件转换为.js文件.

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');

gulp.task('js', function () {
  browserify('public/javascripts/src/app.jsx')
    .transform(reactify)
    .bundle()
    .pipe(gulp.dest('public/javascripts/dist'))
});

```

以上扔了Arguments to path.resolve must be strings.我设法通过使用来绕过它vinyl-source-stream

var source = require('vinyl-source-stream');
...
.bundle()
.source('app.js')
...

为什么这样做？我对nodejs和gulp相当新.在阅读了项目的README和源代码之后,我仍然感到困惑.有帮助吗？

使用Vue(^ 2.0.0-rc.6) + Browserify,入口点是index.js:

import Vue from 'vue'
import App from './containers/App.vue'

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue:

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hello.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

空白的白色屏幕,我错过了什么吗？ …

我正在使用最新版本react-router(版本^ 3.0.0).

我使用ES5编写了以下路由:

routes.js:

var React = require("react");
var Router = require("react-router");
var AuthorPage = require('./components/authors/authorPage')
var App = require('./components/app')
var Route = Router.Route;

var routes = (
    <Route path="/" component={App}>
        <Route path="authors" component={AuthorPage}/>
     </Route>
);

module.exports = routes;

在另一个名为main.jsI的JS文件中,执行以下调用:

main.js:

var React= require("react");
var ReactDom = require("react-dom");
var Router = require('react-router').Router;
var routes = require('./routes');
ReactDom.render(<Router routes={routes}></Router>, document.getElementById('app'));

当我运行代码时,我在Google Chrome开发人员工具中遇到以下异常:

未捕获的TypeError:无法读取未定义的属性'getCurrentLocation'

这是为什么？我错过了什么？

这有点长,但我需要代码示例来说明我的困惑.之后我对以下内容的答案感兴趣:

1. 如何使用require('module'),而不是require('../../src/module')或require('./module')？
2. 如何./index.js在spec/specs.js不重复工作的情况下重复使用？(并且src/app.js因为它是一个入口模块而阻止运行).

我已经开始了几个基于浏览器的项目,并喜欢browserify和grunt.但是每个项目在我的开发/学习曲线中都处于同一点.一旦我添加测试混合并且必须管理两个browserify捆绑包(app.js和spec/specs.js),整个系统就会崩溃.我会解释一下:

我使用grunt-browserify并设置我的初始目录:

.
??? Gruntfile.js
??? index.js  (generated via grunt-browserify)      [1]
??? lib
?   ??? jquery
?   ?   ??? jquery.js                               [2]
?   ??? jquery-ui
?       ??? jquery-ui.js                            [3]
??? spec
?   ??? specs.js  (generated via grunt-browserify)  [4]
?   ??? src
?       ??? spec_helper.js  (entry)
?       ??? module_spec.js  (entry)
??? src
    ??? app.js  (entry)
    ??? module.js …

我正在尝试慢慢地将Browserify引入我的网站,但我不想重写所有的js,我不希望重复的jquery实例和我的Browserify构建捆绑的其他库.

如果我构建我的模块列出jquery作为外部依赖项,我如何将它指向我的全局jquery实例？另外目标是消除mylibs全局(例如下面的例子),所以我不想在我的模块中使用它.

这就是我想要做的事情(psudo-code).这将是我网站的回购 - 而不是模块的回购.该模块将与Bower一起安装:

var mylibs.jQuery = $.noConflict(); // global used by lots of existing code
module.exports = {
    jquery: mylibs.jQuery // can be imported by my module as require('jquery')
};

这样的事情就是我想要实现的目标.这可能吗？

我正在使用browserify-shim,我想使用通用的jQuery插件.我多次查看了Browserify-shim文档,我似乎无法理解发生了什么和/或它如何知道放置插件的位置,附加到jQuery对象等.这是我的package.json文件的样子:

"browser": {
  "jquery": "./src/js/vendor/jquery.js",
  "caret": "./src/js/vendor/jquery.caret.js"
},

"browserify-shim": {
  "caret": {
     "depends": ["jquery:$"]
  }
}

根据browserify-shim文档中给出的示例,我不想指定导出,因为这个插件(以及大多数(如果不是全部)jQuery插件)将自己附加到jQuery对象.除非我上面做错了,否则当我使用它时,我不明白为什么它不起作用(我得到一个错误告诉我函数是未定义的).见下文:

$('#contenteditable').caret(5);  // Uncaught TypeError: undefined is not a function

所以我的问题是,如何使用browserify和browserify-shim配置通用jQuery插件(它将自身附加到jQuery对象)？

例如,我可以这样做:

import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';

React.render( 
  <PanelA />
  <PanelB />, 
  document.body  
);

React将呈现的位置:

body
   PanelA
   PanelB

目前我收到错误:

Adjacent JSX elements must be wrapped in an enclosing tag

同时使用browserify和babelify进行转换

我正在考虑为我的一些项目采用browserify,但是如果他们想要使用(捆绑的)代码,他们希望确保其他人不必使用browserify.显而易见的方法是module.exports通过window.全局公开模块导出.但是,我宁愿不为那些正在require编写脚本的人污染全局命名空间.

是否可以检测脚本是否正在进行require？如果是,那么我可以这样做:

var mymodule = (function() { ... })();
if (isRequired()) {
  module.exports = mymodule;
} else {
  window.mymodule = mymodule;
}

请注意,无论如何,这都将预先捆绑,因此var mymodule不会暴露全局.此外,目前我正在使用揭示模块模式,但愿意切换到更适合browserify的东西.

什么是使模块既有require能力又有<script src=能力的最佳方法？在这两种情况下暴露全局是否最好？

有很多类似的问题,包括堆栈溢出的答案,但没有一个对我有用,所以我在这里问你们.我感谢大家的时间.

我最近开始使用浏览器gulp,这非常有效.然后我尝试使用browserify作为前端使用:Backbone和Bootstrap3.

事情似乎有效,直到我尝试要求Bootstrap附带的js文件.我的chrome工具中出现错误,说明:jQuery未定义.

我试图将其填入,但我对垫片非常困惑.我正在使用jQuery 2.1.1,所以我不需要shim jQuery,但它现在存在于垫片中,因为我绝望并尝试了一切.这是我的package.json和我的main.js文件:

--------------的package.json ------------------

{
  "name": "gulp-backbone",
  "version": "0.0.0",
  "description": "Gulp Backbone Bootstrap",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Rob Luton",
  "license": "ISC",


  "devDependencies": {
    "jquery": "^2.1.1",
    "backbone": "^1.1.2",
    "browserify": "^4.2.1",
    "gulp": "^3.8.6",
    "vinyl-source-stream": "^0.1.1",
    "gulp-sass": "^0.7.2",
    "gulp-connect": "^2.0.6",
    "bootstrap-sass": "^3.2.0",
    "browserify-shim": "^3.6.0"
  },

  "browser": {
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jQuery": "./node_modules/jquery/dist/jquery.min.js"
  },

  "browserify": {
    "transform": ["browserify-shim"]
  },

  "browserify-shim": {
    "jquery": "global:jQuery", 
    "bootstrap": {
      "depends": [
        "jQuery"
      ]
    } …