将 Webpack 语法转换为 browserify 语法

Question

我正在学习 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);
});

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

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

如何转换此代码？我知道我必须转换导入（但不确定语法），还有更多吗？

这是我的 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')
);

Answer 1

无需转换任何内容，您可以使用 Browserify 和 Babel:

按原样使用该代码

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

将 Webpack 语法转换为 browserify 语法

Convert Webpack syntax to browserify syntax

javascript

node.js

reactjs

browserify

webpack