browser.jsから反応するJSX依存関係を削除する

Question

私は反応があるプログレッシブウェブアプリを構築しています。私はJSXを使用して記述することを選択しました。

JSXを使用している場合、browser.jsをインポートする必要があります。 今このbrowser.jsは、このJSXコードをプレーンJavaScriptコードに変換する2 MBのファイルです。ファイルのサイズは、私のアプリケーションが最初に読み込むのに多くの時間がかかることを意味します。

私は私の選択肢が何であるかを知りたい：私はbrowser.js上の任意の依存関係を持たないように

1. 私は使うべきではJSXずに反応します。
2. サイズが200kb未満のbrowser.jsの代替手段はありますか？

JSXなしで反応させると、browser.jsへの依存を取り除くことができるかどうかはまだ分かりません。

Answer 1

Webpackは別の方法です。 Babelを使用してコードをトランジリックにすることができます。次に、webpack.config.jsファイルの例を示します。

module.exports = { 

// This code will be compiled 
entry: "./app/App.js", 

// Then output into this file 
output: { 
    filename: "public/bundle.js" 
}, 


// This will be what we do 
    module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      excluse: /(node_modules|bower_components)/, 
      loader: 'babel', 
      query: { 
       // These are the specific transformations we'll be using. 
       presets: ['react', 'es2015'] 
      } 
     } 
    ] 
    } 
} 

http://babeljs.io/docs/setup/#installation

インストールするには、いくつかのNPMパッケージがあります。次に、package.jsonファイルの例を示します。

{ 
    "name": "", 
    "version": "1.0.0", 
    "description": "", 
    "main": "public/index.html", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
}, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "axios": "^0.12.0", 
    "history": "^1.13.1", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-router": "^1.0.1" //for routing 
}, 
"devDependencies": { 
    "babel-core": "^6.3.13", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "webpack": "^1.13.1" 
    } 
}