That’s right, exports is node-specific JS (used to make part of your module available outside the module) and isn’t supported by web-browsers. Even though NodeJS is technically JS, there are client specific properties (like the window property for browsers, and exports for NodeJS apps) that can’t be interchanged. That said, here’s a client side JS … Read more
Writing Spine = require(‘spine’) in each file is the right way to do. Yet, there are several possibilities by using the global or window object (browserify sets the global object to window, which is the global namespace): in spine.js: global.Spine = module.exports in any other .js file bundled by browserify: global.Spine = require(‘spine’) in a … Read more
tl;dr: Do not choose the past. Choose the future: Modules. In early drafts of the ES6 modules specification, there was an inline modules notion, which then has been eliminated in September 2013. However, this notion was already implemented by the TypeScript team, in 2012, with the first beta versions of the language: it was internal … Read more
According to an issue on Github, you can add run a single javascript line before react is loaded to prevent it. From #191 of react-devtools <script> window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {} </script> Then, you may consider wrapping this with your environment condition, like that you could do sth like below in your server side rendering. … Read more
You can achieve that by using browserify-shim. Assuming that you’ve got a module named mymodule.js that depends on jQuery in the global scope with the following contents: var $ = require(‘jQuery’); console.log(typeof $); Install browserify-shim: npm install browserify-shim –save-dev In package.json file, tell browserify to use browserify-shim as a transform: { “browserify”: { “transform”: [ … Read more
For the client side code, you’re doing the correct thing. babelify it and ship it to the client. For the server side code, I would just do a regular build using babel-cli According to http://babeljs.io/docs/setup/#babel_register, babel-register is not meant for production use — The require hook is primarily recommended for simple cases. for Babel 6+ … Read more
Since the React v16.0 release you can render an array of components without wrapping items in an extra element when you are inside a component: render() { return [ <li key=”one”>First item</li>, <li key=”two”>Second item</li>, <li key=”three”>Third item</li>, <li key=”four”>Fourth item</li>, ]; } Remember only to set the keys. UPDATE Now from the 16.2 version … Read more
The key part of bundling standalone modules with Browserify is the –s option. It exposes whatever you export from your module using node’s module.exports as a global variable. The file can then be included in a <script> tag. You only need to do this if for some reason you need that global variable to be … Read more
Unfortunately import statements does not work like object destructuring. Curly braces here mean that you want to import token with this name but not property of default export. Look at this pairs of import/export: //module.js export default ‘A’; export var B = ‘B’; //script.js import A from ‘./a.js’; //import value on default export import {B} … Read more
The “require” function is only available in the “https://stackoverflow.com/questions/28696511/bundle.js” script context. Browserify will take all the script files necessary and put them into the “https://stackoverflow.com/questions/28696511/bundle.js” file, so you should only have to include “https://stackoverflow.com/questions/28696511/bundle.js” in the HTML file, not the “script.js” file.