React.js开发的基本配置（配了两天）

标签：node   img   是你   color   babel   hub   app   row   提示   

记录下心酸的过程：

1.安装npm

安装node.js,这时候你就可以使用npm了。

因为官方的源下载npm的包比较慢，所以可以用淘宝的源，这时候使用nrm来进行npm源的切换

在cmd中执行

npm install -g nrm （安装nrm）

nrm ls (列出来现在已经配置好的所有的原地址)

nrm use taobao (切换到淘宝源）

nrm ls

现在就可以愉快的用npm来下载包了

2.安装webpack (--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西)

控制台进入你的项目

npm init 

npm install react --save 

npm install webpack babel-loader babel-core --save-dev （局部安装webpack和babel-loader，babel6.0需要babel-core)

npm install babel-preset-es2015 babel-preset-react --save-dev (局部安装es2015和react的预设)

注：接下来的是我在开发中报的错误下载的包（提示我缺少了这些个模块）

npm install babel-plugin-transform-es2015-function-name 

npm install react-dom --save 

3.我的工程目录 （bundle.js不需要建立，根据下面的webpack.config.js配置，会自行建立）

main.js 为入口，通过main.js自动建立bundle.js

然后再index.html中导入main.js

 具体请看我github上的项目

4.配置webpack.config.js，这里你要在项目这建立这个文件

var path = require(‘path‘);
module.exports = {
    entry: path.resolve(__dirname, ‘src/app/main.js‘),
    output: {
        path: path.resolve(__dirname, ‘src/build‘),
        filename: ‘bundle.js‘,
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: ‘babel-loader‘,
                query: {
                    //添加两个presents 使用这两种presets处理js或者jsx文件
                    presets: [‘es2015‘, ‘react‘]
                }
            }
        ]
    },
};

 5.这时候执行webpack就能进行编译打包

webpack

6.参考的网址

https://fakefish.github.io/react-webpack-cookbook/Automatic-browser-refresh.html

https://zhuanlan.zhihu.com/p/20522487?columnSlug=FrontendMagazine

React.js开发的基本配置（配了两天）

标签：node   img   是你   color   babel   hub   app   row   提示   

原文地址：http://www.cnblogs.com/dj3839/p/6617584.html