将 Webpack 语法转换为 browserify 语法答案

【问题标题】：Convert Webpack syntax to browserify syntax将 Webpack 语法转换为 browserify 语法
【发布时间】：2015-10-27 14:55:15
【问题描述】：

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

【问题讨论】：

标签： javascript node.js reactjs browserify webpack

【解决方案1】：

无需转换任何内容，您可以使用 Browserify 和 Babel 原样拥有该代码：

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

【讨论】：

如果我想避免使用 babel，手动转换是否仍然很容易？
你可以用Babel把它转成ES5，转完之后继续上代码。不过那里还使用了其他 ES6 特性，以及 React JSX 语法，Babel 也涵盖了这些语法。 Babel 是使用 React 的 recommended way。