将Webpack语法转换为browserify语法

I am learning Flux and am looking at some sample code for an app.config that uses react-router :

我正在学习Flux并且正在查看使用react-router的app.config的一些示例代码:

import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

This piece of code was written for being used with the Webpack module.

这段代码是为与Webpack模块一起使用而编写的。

I would try to avoid using it and only use browserify instead.

我会尽量避免使用它,而只使用browserify。

How do I convert this code? I know I must convert the imports (but am not sure of the syntax), is there more to it?

如何转换此代码?我知道我必须转换导入(但我不确定语法),还有更多吗?

Here is my app.js so far :

这是我的app.js到目前为止:

var React = require('react');
var ProductData = require('./ProductData');
var CartAPI = require('./utils/CartAPI')
var FluxCartApp = require('./components/FluxCartApp.react');


// Load Mock Product Data into localStorage
ProductData.init();

// Load Mock API Call
CartAPI.getProductData();

// Render FluxCartApp Controller View
React.render(
  <FluxCartApp />,
  document.getElementById('flux-cart')
);

1 个解决方案

#1

No need to convert anything, you can have that code as-is with Browserify and Babel:

无需转换任何内容,您可以将该代码与Browserify和Babel一起使用:

npm install babelify
browserify main.js -t babelify -o dist.js