寫一個react的項目

基本配置

1.npm init 生成 package.json 文件.

2.安裝各種需要的依賴:

• • 安裝其他的babel依賴（babel真心是一個全家桶，具體的介紹去官網看吧..我後面再總結，這裏反正全裝上就是了）:

  • npm install --save babel-polyfill - Babel includes a polyfill that includes a custom regenerator runtime and core.js. This will emulate a full ES6 environment

  • npm install --save-dev babel-loader - webpack中需要用到的loader.

  • npm install --save babel-runtime - Babel transform runtime 插件的依賴.

  • npm install --save-dev babel-plugin-transform-runtime - Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.

  • npm install --save-dev babel-preset-es2015 - Babel preset for all es2015 plugins.

  • npm install --save-dev babel-preset-react - Strip flow types and transform JSX into createElement calls.

  • npm install --save-dev babel-preset-stage-2 - All you need to use stage 2 (and greater) plugins (experimental javascript).

  • npm install --save react - 安裝React.

  • npm install --save react-dom 安裝React Dom,這個包是用來處理virtual DOM。這裏提一下用React Native的話，這裏就是安裝react-native。

  • npm install --save-dev webpack - 安裝Webpack, 現在最流行的模塊打包工具.

  • npm install --save-dev webpack-dev-server - webpack官網出的一個小型express服務器，主要特性是支持熱加載.

  • npm install --save-dev babel-core - 安裝Babel, 可以把ES6轉換爲ES5，注意Babel最新的V6版本分爲babel-cli和babel-core兩個模塊，這裏只需要用babel-cor即可。

    3.打開 package.json 然後添加下面的scripts:

    "scripts": {
     "start": "webpack-dev-server --hot --inline --colors --content-base ./build",
     "build": "webpack --progress --colors"
    }

    命令行輸入 npm start 將要啓動webpack dev server.

    命令行輸入 npm build 將會進行生產環境打包.

    4.啓動webpack

    Webpack是我們的打包工具，在我們的開發環境中具體很重要的作用，具有很多非常便捷的特性，尤其是熱加載hot reloading. webpack.config.js 是如下所示的webpack的配置文件. 隨着app的不斷變化，配置文件也會不斷的更新，這裏我們就用默認的webpack.config.js來命名這個配置文件，假如你用別的名字比如webpack.config.prod.js那麼上面的腳本build就需要相應的改變指定相應的配置文件名字："build": "webpack webpack.config.prod.js --progress --colors"

    var webpack = require('webpack');module.exports = { entry: './src/app.js', output: {     path: __dirname + '/build',     filename: "bundle.js"
     }, module: {     rules: [{         test: /\.js$/,         exclude: /node_modules/,         loader: 'babel-loader',         query: {             plugins: ['transform-runtime'],             presets: ['es2015', 'react', 'stage-2']
             }
         }, {         test: /\.css$/,         loader: "style-loader!css-loader"
         }]
     }
    };

項目的基本配置終於完成了(2017.6.15)