Release a umd build? #95
Comments
|
I can look into the umd build. I haven't actually worked with umd before, but it does look like there are a few tools out there for it so it might be relatively painless. |
|
Versions 0.3.1 and up should now support UMD. I have published 0.3.1 today. Let me know if you run into any problems. |
|
Can you provide an example: how to use it? |
|
If i am understanding UMD correctly, it is just a way to allow AMD and RequireJS. Here are some examples for AMD, RequireJS, and es6 module imports. I am assuming you can use ES6 in your project though. // AMD
require(['react', 'react-dom', 'react-md/lib/Cards'], function(React, ReactDOM, Cards) {
const { Card, CardText } = Cards;
ReactDOM.render(
<Card>
<CardText>This is some text for a card</Card>
</Card>,
document.getElementById('app')
);
});// RequireJS
const React = require('react');
const ReactDOM = require('react-dom');
const Cards = require('react-md/lib/Cards');
const { Card, CardText } = Cards;
ReactDOM.render(
<Card>
<CardText>This is some text for a card</Card>
</Card>,
document.getElementById('app')
);// ES6 Modules
import React from 'react';
import ReactDOM from 'react-dom';
import { Card, CardText } from 'react-md/lib/Cards';
ReactDOM.render(
<Card>
<CardText>This is some text for a card</Card>
</Card>,
document.getElementById('app')
);I am honestly guessing on the AMD implementation though. There aren't too many examples I can use to base that off of.I just know that my compiled sources in |
|
Actually, I want to use it in browser, for testing and learning purpose without create a whole new project. For example, use React in a single html file. <!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/node_modules/babel-core/browser.js"></script>
<script type="text/babel">
class App extends React.Component {
render() {
return <div>hello</div>
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
</script>
</html>I think react use webpack to generate one single umd dist file. |
|
Ahh ok. I didn't understand the ticket then. I'll reopen and set that up! |
|
Ok, my latest pull request (and release 0.3.2+) will work in the browser or through the normal amd/requirejs/es modules imports. I am not sure what version of So here was the <!DOCTYPE html>
<html>
<head><link href="node_modules/react-md/dist/react-md.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script src="node_modules/react-md/dist/react-md.js"></script>
<script type="text/javascript">
const input = `
const { Card, CardText } = ReactMD;
class App extends React.Component {
render() {
return (
<Card>
<CardText>Hello, world!</CardText>
</Card>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
`;
eval(Babel.transform(input, { presets: ['es2015', 'react', 'stage-0'] }).code);
</script>
</html>So every component is now accessible through the global |
|
It's working. Thank you very much. I use babel 5, and they have discussed about supporting 'text/babel' type in babel-standalone |
This library is great, thank you for your work. Is it possible to release a umd build? For example, the react node module contains a umd build by itself.
The text was updated successfully, but these errors were encountered: