<!doctype html>
<html>
<head>
<title>Demo</title>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/jquery.js"></script>
<script src="vendor/tipso.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/jquery.js"></script>
<script src="vendor/tipso.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/tipso.js"></script>
<script src="vendor/jquery.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
// CommonJS
var dep = require("dependency")
dep.doSomething();
// webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
}
}
$ browserify entry.js -o bundle.js
//webpack.config.js
module.exports = {
...
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
}
]
}
$ browserify -t babelify entry.js -o output.js
// webpack.config.js
module.exports = {
...
loaders: [
...
{
test:
/\.css$/,
loader: "style-loader!css-loader"
}
]
}
// component.js
require("./styles.css");$ browserify -t brfs entry.js -o output.js// component.js
var fs = require('fs');
var insertCss = require('insert-css');
var css = fs.readFileSync(__dirname + '/style.css');
insertCss(css);
/* styles.css */
local:(.foo) {
color: purple;
}// component.js
var styles = require("./styles.css");
var Component = React.createClass({
render: function() {
<div className={styles.foo}>
Text is purple
</div>
}
})/* exported CSS */
._23_aKvs-b8bW2Vg3fwHozO {
color: purple;
}
//webpack.config.js
module.exports = {
...
loaders: [
{
test: /\.png$/,
loader: "url-loader?limit=100000"
}
]
}
// component.js
var fs = require('fs');
var imdata = fs.readFileSync(__dirname + '/image.png', 'base64');
var img = document.createElement('img');
img.setAttribute('src', 'data:image/png;base64,' + imdata);
document.body.appendChild(img);$ browserify -t brfs entry.js -o output.js
//webpack.config.js in dependency
module.exports = {
entry: './Component.jsx',
output: {
path: './build',
filename: 'component.js',
library: 'Component',
libraryTarget: 'umd'
},
externals: {
react: {
root: 'React',
commonjs: 'react',
commonjs2: 'react',
amd: 'react'
}
},
loaders: [...]
}try --standalone and --exclude?
Making front-end modules actually work
By Lin Clark
