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语法

1 个答案: