Удаление реакции зависимости от JSX от browser.js

Question

Я создаю прогрессивное веб-приложение с реагированием. Я решил написать с помощью JSX.

Учитывая, что я использую JSX, тогда мне нужно импортировать browser.js. Теперь этот browser.js представляет собой файл размером 2 МБ, который преобразует этот код JSX в обычный код JavaScript. Размер файла означает, что моему приложению требуется много времени для загрузки изначально.

Я хочу знать, каковы мои варианты:

1. Должен ли я использовать реагирующие без JSX, так что у меня нет каких-либо зависимость от browser.js.
2. Есть ли какая-либо альтернатива browser.js которая меньше 200kb?

Я до сих пор неясно, может ли я использовать реакцию без 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

Есть несколько НПХ пакетов для установки. Вот пример файла 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" 
    } 
}