您的位置: 首页  >  文章  >  本地项目推送到GitHub及React/Webpage配置环境和实现热替换

本地项目推送到GitHub及React/Webpage配置环境和实现热替换

分类: 文章 • 2024-02-21 20:48:58

一、Git实现本地项目推送GitHub


1.首先定义全局用户名和邮箱：


git config  –global user.name "***"
git config  –global user.email"***@**.**"


2.检查是否已生成** cd ~/.ssh，ls如果有3个文件，则**已经生成，id_rsa.pub就是公钥；如果没有生成，那么通过 ssh-****** -t rsa -C "yourEmail" 来生成。将公钥粘贴到GitHub。


cd ~/.ssh
ls
ssh-****** -t rsa -C "yourEmail"


本地项目推送到GitHub及React/Webpage配置环境和实现热替换


3.GitHub创建New repository。至此，可以copy SSH秘钥。


git remote add origin [email protected]:hana333/webStorm.git


这样就将本地项目关联到GitHub上了，可以正常执行pull,push项目的操作了。


 git add .    //保存
 git commit -m "some description"    //commit到本地
 git pull -u origin master   //拉取远端默认分支
 git push -u origin master  //推送到远端默认分支


二、react配置环境及webpack配置实现热替换


1.根目录下建一个webpack.dev.js，设置好入口出口文件等内容。

2.npm init,生成package.json,其中会显示你所安装的依赖，然后对应可以找出少了哪些你需要的依赖。

3.安装缺少的react包。


npm install --save react react-dom
npm install --save-dev webpack babel-cli babel-loader babel-preset-es2015 babel-preset-react


4.修改package.json里面的scripts：


“scripts”：{
   “dev”：“webpack --config webpack.dev.js” 
}


到这边，webpage和react的基本配置就完成了。如果想要实现热替换的话，接下来的步骤可以实现。


1.用webpage创建一个本地服务器。


npm webpack-dev-server html-webpack-plugin --save-dev


2.修改package.json里面的scripts：


“scripts”：{
   “dev”：“webpack-dev-server --config webpack.dev.js”
}


3.安装react-hot-loader：


npm install --save-dev react-hot-loader


4.更改webpack.dev.jsh和.babelrc的配置，这里主要是记录流程。具体变更内容就不贴出来了。

5.最后npm run dev就可以启动热替换了。


以上内容不是很完善，为了自己方便记忆和整理流程写的。如果有错误，敬请指出。

参考文档链接：

http://www.ruanyifeng.com/blog/2015/03/react.htm

https://github.com/varHarrie/YmxvZw/issues/14

相关推荐