首页 > 代码库 > React.js开发的基本配置(配了两天)

React.js开发的基本配置(配了两天)

记录下心酸的过程:

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开发的基本配置(配了两天)