Question

我正在构建一个渐进的Web应用程序并做出反应。我选择使用JSX编写。

鉴于我正在使用JSX，那么我必须导入browser.js。现在这个browser.js是一个2 MB的文件，它将这个JSX代码转换为纯JavaScript代码。文件的大小意味着我的应用程序最初需要花费大量时间才能加载。

我想知道我的选择是什么：

我应该在没有JSX的情况下使用react，这样我就不会依赖browser.js。
browser.js是否有小于200kb的替代品？

我还不清楚，如果我在没有JSX的情况下使用react，那么我可以删除对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"
  }
 }

Answer 2

‍♀️ JSX的替代版本

JSX有一些不需要任何编译器的替代方法：

从browser.js中删除反应JSX依赖项

2 个答案: