个人房屋做民宿在哪个网站,seo与sem的区别与联系,设计本网站,西安市建设工程信息网诚信信息平台诚信承诺书在哪儿下载学习react#xff0c;配置是很痛苦的一关#xff0c;虽然现在有了create-react-app这样方便的工具#xff0c;但是必须要自己配置一遍#xff0c;才能更好地进行项目开发。 首先要明确一个概念#xff1a;react的文件必须经过编译才能被浏览器识别#xff0c;因此我们需要… 学习react配置是很痛苦的一关虽然现在有了create-react-app这样方便的工具但是必须要自己配置一遍才能更好地进行项目开发。 首先要明确一个概念react的文件必须经过编译才能被浏览器识别因此我们需要webpack这个打包工具来把react的组件打包成一个js文件然后将这个js文件放到flask目录下然后引入到flask模版的html文件里面。当然你也可以在前端用express等服务进行客户端渲染只将flask服务视为一个传递数据的api。 下面开始配置吧 1、如果你的电脑没有安装node.js先装node.js brew install node 或者yarn install node 然后查看node和npm的版本检查安装情况npm是node自带的安装工具 node -v
npm -v 2、npm安装的时候有可能很慢最好把资源换成淘宝的 npm config set registry https://registry.npm.taobao.org 验证配置是否成功 npm config get registry 3、新建一个空的文件夹作为项目根目录在项目根目录 npm init 接下来要填的东西按需求填写也可以之后在package.json中修改 现在根目录多了一个文件package.json这个是npm的配置文件。之后我们会在这个文件里定义一些npm的脚本。 4、因为我们的项目需要用到webpack和react先装上 npm install -s webpack
npm install -s react -s表示会把这个包连同版本号写到package.json的dependencies中如果加上-d就会把这个包写到devDependencies。package.json中的dependencies与devDependencies两项的区别是devDependencies中的插件只用于开发环境development而不用于生产环境production如何在运行的时候指定开发环境或生产环境我们之后会提到。 5、在项目根目录新建一个名为webpack.config.js的文件这个文件用于配置webpack const path require(path)//引用path包。在node_modules中
const HTMLPluginrequire(html-webpack-plugin)
module.exports{entry:{app:path.join(__dirname,/client/main.js)//main.js作为打包的入口根据main中的依赖关系整体打包},output:{//打包后的输出filename:[name].[hash].js,//打包后输出的文件名。name就是entry中入口文件的名字这里是app。//webpack会根据打包的文件内容计算hash当文件内容有变动的时候hash值才会变化//这样的话没有文件改动的时候不会刷新浏览器缓存path:path.join(__dirname,/static),//输出路径publicPath://静态资源文件引用时的路径在浏览器中的引用变为public/app.hash.js。不太理解},module:{rules:[//rules里可以配很多loader{test: /\.jsx?$/,//如何识别jsx类型的文件loader:babel-loader//babel可以将最新js语法编译到低版本}]},plugins:[new HTMLPlugin({template:path.join(__dirname,/client/template.html)//html模版})],devServer:{port:8888,contentBase:path.join(__dirname,/static),//对应打包后输出的pathoverlay:{errors:true//获取到的错误信息会在页面上显示}}
} 这样配置的话需要装很多依赖库。首先装上html-webpack-plugin这是一个可以在webpack输出目录生成一个html页面同时将打包好的js文件引入页面。如果我们要用webpack-dev-server这个库必须要装。 然后装上webpack-dev-server这个服务启动后访问本机对应的端口就可以看到项目的效果当你对文件有任何修改时它会自动编译出js文件与html文件存在内存中然后调用这些文件渲染出html展示内容。达到的效果就是可以在编辑保存文件后不用手动执行build刷新一下页面就可以看到修改后的内容 然后是babel-loader这个库这个库的作用是将react特有的jsx语言翻译成浏览器可以识别的js语言。装了它之后还要装很多其他的库之前看教程装了babel-core等库都运行不成功说版本太旧所以正确的姿势是装上babel/core、babel/preset-react、babel/preset-env这三个库然后在根目录新建一个名为.bablerc的babel配置文件内容是 {
presets: [babel/preset-env,babel/preset-react]
} 6、我们开始写一个可以打包的包含react组件的js文件 在项目根目录新建如webpack配置所述的打包入口文件内容为 import React from react;
import ReactDOM from react-dom;class Clock extends React.Component {constructor(props) {super(props);this.state {opacity: 1.0,date:new Date()//new Date()时会获取新的时间}}componentDidMount() {this.timer setInterval(function () {var opacity this.state.opacity;opacity - .1;if (opacity 0) {opacity 1.0;this.setState({date:new Date()});}this.setState({opacity: opacity});}.bind(this), 100);}render() {return (divh1MyClock/h1h2 style{{opacity: this.state.opacity}}{this.state.date.toLocaleTimeString()}/h2/div); //记得要加toLocaleTimeString报错卡我了20分钟}
}ReactDOM.render(Clock /,document.getElementById(root)) 这是一个简单的时钟组件要注意的是最后返回的时候这个组件是挂在root节点的但是我们用html-webpack-plugin自动生成的文件是不会生成一个root节点的因此就需要给它一个模版html里面包含root节点。如果你问为什么不直接挂在body上因为挂在body上编译的时候会一直有个warning很烦所以我就听它的挂在节点上啦。 html模版如下 !DOCTYPE html
htmlheadmeta charsetUTF-8titleWebpack App/title/headbodydiv idroot/div/body
/html 7、该配置的配置了需要打包的文件也写好了。现在我们到package.json里写一下npm脚本然后就可以用npm进行打包或者运行开发服务器了 scripts: {build: rimraf static webpack --modeproduction --config webpack.config.js,dev: webpack-dev-server --modedevelopment --config webpack.config.js}, build是打包命令dev是运行webpack-dev-server。用 --mode... 可以设置命令执行在开发环境还是生产环境。rimraf是一个可以删除文件的工具库我们也把它装上先它可以帮我们在每一次build之前先把之前生成过的打包文件删除。 8、测试一下 打包 npm run build 运行开发服务器 npm run dev 9、将打包的js文件引入到flask应用 在项目根目录创建run.py文件加上一个最简单的路由 app.route(/)
def index():return render_template(1.html) 再创建templates文件夹和该文件夹下的1.html文件文件内容如下 !DOCTYPE html
html
headmeta charsetutf-8titleChat/title
/head
bodydiv idroot/divscript typetext/javascript src{{ url_for(static, filenameapp.16d576b97de33ccfcd4f.js) }}/script
/body
/html 然后运行run.py文件就可以通过访问flask应用的端口来获取我们写的前端应用了。 这么做就免去了配置前端服务器和配置nginx反向代理的过程响应速度我个人感觉也不会太慢但是build之后如果js文件名变化要改1.html中相应的内容。反正开发的时候用webpack-dev-server测试好了再build。转载于:https://www.cnblogs.com/luozx207/p/9739834.html
