<!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

Making front-end modules actually work

  • 1,042
Loading comments...

More from Lin Clark