React+ES6+Webpack项目实战

2017-07-25  本文已影响0人  勇敢的心1025

前文有对React+ES6知识进行了总结,下面正式进入实战。


温馨提示:为了能支持es6,请下载4.0以上版本的node.js。有了node和在node中集成的npm,为了加快框架的下载速度,建议输入以下命令切换至淘宝源:

npm config set registry http://registry.npm.taobao.org/

1、全局安装Webpack, Babel, Webpack-dev-server

cnpm install babel webpack webpack-dev-server -g

2、建立项目目录,用npm init 初始化 

mkdir react-hello-world

cd react-hello-world

npm init

注:执行npm init命令时会让你输入各种项目信息,一般直接回车就好,会自动填写默认值。但是,要注意name不能跟我们的模块和项目文件目录同名。如果你要问我mkdir和cd是什么意思,我希望你回家种地,不要问我为什么。。。

我设置的名字是project

3、在项目中安装 react, react-dom

cnpm install react react-dom --save

注:请不要问我为什么一会用cnpm,一会用npm,因为我喜欢,没有为什么。。。

4、在项目中安装 Babel 转换器,需要用到插件 babel-preset-react, babel-preset-latest,latest 即最新的 ES 规范,包括了 Async/Await 这些新特性。

cnpm install babel-loader babel-core babel-preset-react babel-preset-latest --save

5、创建项目文件,main.js 即项目入口文件,App.js 即 React 组件主文件

touch index.html App.js main.js webpack.config.js

注:也许你对touch感觉很陌生,这是什么鬼!我也很陌生,自己可以手动新建上面四个文件。有人不知道手动吗?应该没有吧,呵呵呵。。。

6、到这一步,项目的结构应该如下图,如果有和下面的不一样的麻烦你把它变一样。。。至于怎么变,我不关心。。。

7、配置webpack,编辑webpack.config.js

       module.exports={

                    entry: './main.js', // 入口文件路径

                    output: {

                    path: '/',

                    filename: 'index.js'

                },

              devServer: {

                       inline: true,

                       port: 3333

             },

              module: {

                loaders: [

                               {

                                    test: /\.js$/, // babel 转换为兼容性的 js

                                    exclude: /node_modules/,

                                    loader: 'babel-loader',

                                    query: {

                                             presets: ['react', 'latest']

                                       }

                       }

                  ]

           }

       }

如果你感觉看桌不舒服,下面把截图奉上:

8、开始写项目

index.html:

App.js:

main.js:

9、配置 npm scripts, 编辑 package.json,在"scripts"属性处添加一行:

"scripts": {

              "start": "webpack-dev-server"

},

10、基本的框架搭建完毕,npm start 然后打开 http://localhost:3333 试试:

npm start

上一篇 下一篇

猜你喜欢

热点阅读