從browser.js刪除反應JSX依賴項

我正在建設一個漸進的Web應用程序與反應。我選擇使用JSX編寫。從browser.js刪除反應JSX依賴項

鑑於我正在使用JSX，那麼我必須導入browser.js。這個browser.js是一個2MB的文件，它將這個JSX代碼轉換爲普通的JavaScript代碼。文件的大小意味着我的應用程序需要大量的時間才能初始加載。

我想知道什麼是我的選擇：

我應該使用沒有JSX反應，因此我不會有任何依賴於browser.js做。
是否有任何替代browser.js這是小於200kb的大小？

我還不清楚，如果我沒有JSX使用反應，那麼我的依賴browser.js可以被刪除。

2016-07-25 Uday Khatry

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" 
    } 
}

來源

2016-07-25 07:24:08 vincentjp

從browser.js刪除反應JSX依賴項

回答

相關問題