Articles of reactjs browserify

通过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中使用的版本。

React和Grunt – Envify NODE_ENV ='production'和UglifyJS

我正在使用Grunt构build一个React项目,我想要“dev”和“prod”风味。 正如反应文件所说: 要在生产模式下使用React,请将环境variablesNODE_ENV设置为生产。 build议使用UglifyJS等执行死代码清除的清除器来完全删除开发模式中存在的额外代码。 我非常新的使用grunt,browserify和东西,但让我们看看。 我的第一个问题就是envify,我把它作为一个转换: browserify: { options: { transform: ['reactify'], extensions: ['.jsx'] }, dev:{ options: { watch: true //Uses watchify (faster) }, src: ['js/app.js'], dest: 'js/bundle.js' }, /** * To use React in production mode, set the environment variable NODE_ENV to production. * A minifier that performs dead-code elimination such as UglifyJS is […]