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