Tag: reactjs browserify

为什么我不能在node.js（browserify）的require（）函数中使用variables作为参数？: 我尝试了这样的： var path = '../right/here'; var module = require(path); 但不能以这种方式find模块，而： var module = require('../right/here'); 奇迹般有效。想要加载生成的string列表的模块，但我不能包围我的头围绕这个问题atm。有任何想法吗？

通过browserify reactjs包脚本不工作在客户端（未捕获ReferenceError：组件未定义）: 我尝试使用node.js和reactjs作为我的PHP后端模板呈现服务。这是指导原则。我想知道是否有一个问题，我build立了由bundle.js 。我得到Uncaught ReferenceError: ItemPage is not defined在客户端，因为组件ItemPage不是全局的bundle.js ，但我不知道如何访问它，因为它被包裹在一些我真的不需要的函数理解。这是我的es6组件脚本： import React from 'react'; import Tabs from 'grommet/components/Tabs'; import Tab from 'grommet/components/Tab'; class ItemPage extends React.Component { render(){ return <Tabs onClick={this._onClick.bind(this)}> <Tab title="First Title"> <h3>First Tab</h3> <p>Contents of the first tab !</p> <div>Something@@@@@@</div> </Tab> <Tab title="Second Title"> <h3>Second Tab</h3> <p>Contents of the […]

你怎么知道Node.js代码将在浏览器上运行？: 我正在学习如何使用Flux，并在文档中遇到以下行：“我们可以使用Node的EventEmitter开始使用商店。” 我知道你可以使用诸如Browserify之类的东西来进行绑定和缩小，抓取Node代码所要做的所有依赖项，以使得捆绑的浏览器兼容的JS文件。但是，现在困扰着我的是如何知道你能做什么。我们如何知道我们被允许在浏览器中使用哪些节点代码？

browserify – 排除代码块？: 我在浏览器和服务器端Node上构build了一个包含共享React组件的应用程序。现在，我正在使用Marty.js来做到这一点： function getUser() { if (Marty.isBrowser) { /* Get user using some client method */ } else { /* otherwise, use some secret server code */ } } 我通过Browserify捆绑了这些function，因此它们可以在客户端以及服务器上运行。我想要做的是从包中完全删除else块，所以我没有泄漏敏感的服务器端代码。有没有办法从软件包中排除代码块？

使用browserify / envify删除process.env.NODE_ENV？: 所以我通过NPM和Browserify使用ReactJS，但是我正在试图弄清楚如何在生产模式下构build它，就像自述文件所说的那样，但它似乎并不工作。我有这个代码来设置browserify： var browserify = require('browserify'); var envify = require('envify/custom'); var debug = false; … var libraries = browserify({ debug: debug }).transform(envify({ _: 'purge', NODE_ENV: debug ? 'development' : 'production' })); gulpConfig.tasks.browserify.transformers.forEach(function(transform) { libraries.transform(transform); }); gulpConfig.tasks.browserify.libraries.forEach(function(metaData) { if(metaData.path) { libraries.require(metaData.path, { expose: metaData.name }); } else { libraries.require(metaData.name); } }); var libraryStream = libraries.bundle() .on('error', […]

在我的应用程序中，如何“交换”反应/插件？: 我想使用Perf的东西。看来，如果我这样做： var React = require('react/addons'); 在我自己的模块中，然后库（react-bootstrap，react-router等）最终使用另一个简单的反应副本，事情破裂。我正在使用browserify。有没有修复或其他方式来做到这一点？

使用路由器和浏览器时，React.js包的大小太大: 这是我的Routes.jsx文件 var React = require('react'); var Router = require('react-router/lib/router') var useRouterHistory = require('react-router/lib/useRouterHistory'); var hashHistory = require('history/lib/createHashHistory'); var IndexRoute = require('react-router/lib/IndexRoute'); var Route = require('react-router/lib/Route'); var History = useRouterHistory(hashHistory)({ queryKey: false }); var Base = require('./components/Pages/Base.jsx'); var HomePage = require('./components/Pages/HomePage.jsx'); var Historial = require('./components/Pages/Historial.jsx'); var NuevoPedido = require('./components/Pages/NuevoPedido.jsx'); var Routes = ( <Router history={History}> <Route […]

如何在React组件中调用minimize（）和focus（）？: 我有一个最小化和最大化应用程序窗口的电子示例应用程序，我想在React应用程序中做同样的事情。但是，我如何在我的React组件中获得对主应用程序窗口的引用呢？我的main.js程序包含： const electron = require('electron'); const {BrowserWindow} = electron; … function createWindow() { // Create the browser window. mainWindow = new BrowserWindow({ width: 500, height: 300, frame: false, resizable: false }); global.mainWindow = mainWindow; … } 在Electron示例中，我的app / index.js文件包含： var remote = require('electron').remote; … remote.getGlobal("mainWindow").minimize(); 在我的React示例中，我的app / app.js文件包含： import React from 'react'; import […]

如何以编程方式使用browserify的factor-bundle？: 我想使用factor-bundle来查找我的browserify入口点的常见依赖项，并将它们保存到一个公共包中： https://www.npmjs.org/package/factor-bundle factor-bundle文档使得在命令行上看起来很容易，但是我想以编程的方式进行，而且我正在努力想办法解决这个问题。我目前的脚本是这样的（我正在使用reatify来转换react的jsx文件）： var browserify = require('browserify'); var factor = require('factor-bundle') var glob = require('glob'); glob('static/js/'/**/*.{js,jsx}', function (err, files) { var bundle = browserify({ debug: true }); files.forEach(function(f) { bundle.add('./' + f); }); bundle.transform(require('reactify')); // factor-bundle code goes here? var dest = fs.createWriteStream('./static/js/build/common.js'); var stream = bundle.bundle().pipe(dest); }); 我试图找出如何使用factor-bundle作为插件，并为每个input文件（即文件中的每个条目）指定所需的输出文件

Browserifying反应与附加到一个独立的组件，可用插件: 我有点反应和浏览，并有这些愿望：我想将我写的所有代码捆绑到一个文件中我想捆绑所有第三方的依赖（反应，反应路由器，lodash等）到单独的文件，每个lib一个，以最大限度地caching可能性我设法做了上述的事情，但我遇到了这样的具体情况：在我的代码的一些地方，我想使用附加的反应，因此需要这样的： var React = require('react/addons) 。我不在我的代码的所有部分这样做，它不是在第三方依赖，如react-router。这似乎造成了冲突。或者browserified bundle只能通过var React = require('react/addons)来打破第三方的依赖关系，否则我将不得不捆绑包含或不包含addons的反应捆绑和下载两次。我试图使用别名，并作出react react/addons的别名，但我不能使它的工作。这应该是可能的吗？另一个可以接受的解决scheme是将附加组件捆绑在一个单独的捆绑包中，并通过这个组合使得这两个react/addons可以通过调用来react和react/addons 。这有可能吗？补充作为对BrandonTilley的第一条评论的评论，这不仅仅适用于React和插件。 Lodash也有许多不同的发行版本，我希望能够在这种情况下select在我的webapp中使用的版本。