从零开始学习搭建React脚手架项目
写在前面
创新互联建站是一家集网站建设,梁平企业网站建设,梁平品牌网站建设,网站定制,梁平网站建设报价,网络营销,网络优化,梁平网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多
react和vue,angular一样也有脚手架。这大大方便了我们的开发。react的脚手架是create-react-app。
脚手架下载
使用npm下载create-react-app运行如下命令:
npm install -g create-react-app
国内npm一般下载比较慢或者是常出现下载失败的情况,我们可以指定下载的仓库:
npm install -g create-react-app --registry https://registry.npm.taobao.org
或者直接设置npm的默认仓库:
npm config set registry https://registry.npm.taobao.org
第一步,依赖总览
完成到我现在半成品的过程中,目前完成开发模式的相关操作,添加了babel,less,antd按需加载的地步。总体的package.json情况如下:
{ "name": "myreact", "version": "1.0.0", "description": "test react", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development" }, "keywords": [ "test", "react" ], "author": "xxxx", "license": "ISC", "devDependencies": { "autoprefixer": "^9.1.2", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-import": "^1.8.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^1.0.0", "html-webpack-plugin": "^3.2.0", "less": "^3.8.1", "less-loader": "^4.1.0", "postcss-import": "^12.0.0", "postcss-loader": "^3.0.0", "react-hot-loader": "^4.3.4", "style-loader": "^0.22.1", "webpack": "^4.16.5", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.5" }, "dependencies": { "antd": "^3.8.2", "react": "^16.4.2", "react-dom": "^16.4.2", "react-router-dom": "^4.3.1" } }
暂时做到这些依赖,需要指出的是,webpack4和以前的版本可能有差别(不一定,或许是我没有注意到)如果需要在scrpit属性中配置,使用cli的方式运行,就需要安装webpack-cli,需要行内命令行的方式运行,就需要安装webpack-command,当然,一起安装应该也没有什么问题。这里是和教程里面配置的不一样的地方。
然后,webpack4需要指明模式production|development
,所以我在dev中使用了--mode development
这个参数。这也是教程中没有提到的部分。
关于babel配置
babel的相关依赖,有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0
,这个是babel的相关依赖,等等,有人可能会看到babel-plugin-import
没有提到,这个模块的用途是为了antd的按需加载的。可以看看详细的babelrc文件:
{ "presets": [ "es2015", "react", "stage-0" ], "plugins": [ "react-hot-loader/babel", ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] }
以上是babel的配置,preset的值就是那三个模块,至于作用,es2015是为了处理es6语法的,react是为了处理jsx语法的,stage-0是为了支持新特性的。
至于插件的配置,react-hot-loader/babel
是为了热更新,不丢失状态,这点教程中已经说到了。下边的import这个,就是上边提到的babel-plugin-import
的配置,也是antd的按需加载,官方推荐的配置。
还需要提到一点,这里可能一些新特性还是支持不够,比如async/await
语法,可能需要再安装babel-plugin-transform-runtime
这个模块,babelrc
文件的plugins
还需要配置"transform-runtime"
这个插件进去,以支持新特性。
依赖相关的就说到这里。
webpack的配置
我这边直接在根目录下的config目录创建了webpack.dev.config.js,
具体的配置如下:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { /*入口*/ entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')], /*输出到dist文件夹,输出文件名字为bundle.js*/ output: { path: path.join(__dirname, '../dist'), filename: 'bundle.js' }, devServer: { contentBase: path.join(__dirname, '../dist'), historyApiFallback: true }, module: { rules: [{ test: /\.js[x]?$/, use: ['babel-loader?cacheDirectory=true'], include: path.join(__dirname, '../src') },{ test: /\.css$/, use: ['style-loader','css-loader','postcss-loader'], }, { test: /\.less$/, use:[ 'style-loader', {loader: 'css-loader',options:{importLoaders:1}}, 'less-loader'], }] }, plugins:[new HtmlWebpackPlugin({ title:'react测试', template:'./src/index.html', filename:'./dist/index.html' })], devtool: 'inline-source-map', resolve:{ alias: { "@":path.join(__dirname, '../src/') } } };
这边的配置就没啥说的,基本上loader的配置,目前完成js(x)
的处理,css/less
的处理,和其他的常规cli配置,少了url-loader,file-loader
,代码分割这些功能。
完结
差不多配置就是这样,很简陋,功能也不齐全,需要完成的工作还有很多。不过自己动手,丰衣足食……
项目的github地址 diy-react-cli欢迎各位来串门哟!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
新闻名称:从零开始学习搭建React脚手架项目
URL地址:http://myzitong.com/article/iiehhc.html