把想法变为现实的能力是空想家与实干家的区别. 不管你是在一家跨国公司工作, 还是正在为自己的创业公司而努力, 那些有能力将创意转化为真正产品的人, 都具有宝贵的技能并拥有明显的实力. 如果你能在不到一个小时的时间里创建一个全栈的 web 应用, 那么你就有能力为自己下一个伟大的想法迅速的的创建一个简单的 MVP, 或者在工作中快速构建一个新的应用程序.
本文介绍了创建一个简单的全栈 Web 应用所需的步骤, 其中包括一个 Python 服务器和一个 React 前端. 你可以轻松的在其基础上进行构建, 根据你的实际需求进行修改, 或是添加一些其他技术特性, 例如 Redux.
世界在互联网的驱动下, 计算机的基本技术和简单工具已经成为现代商业人士的必备技能. 本文适合想要学习怎样制作一个简单的基于 Web 的应用程序, 并且具备基本编程技能的人.
尽管你可以在我的 GitHub https://github.com/angineering/FullStackTemplate 上找到本文所有的源代码, 但是如果你能够从头开始创建这个程序, 将会得到最好的学习成果.
初始项目设置
.
├── README.md
└── fullstack_template/
├── server/
└── static/
├── CSS/
├── dist/
├── images/
└── JS/
我们将使用 NPM 包管理器来处理 JavaScript 依赖项. NPM 是非常棒的, 因为它易于使用, 有良好的文档支持, 有将近 50 万个包可供使用, 以及合理的默认项目设置方案.
使用包管理器可以使您的项目依赖项保持最新状态, 并能够获取和安装最新的包.
让我们初始化项目:
- $cd fullstack_template/static
- $ NPM init
在初始化的过程中可以接受默认设置, 但是你最好填写自己的程序名称和 Git 库等参数, 结束后会自动在你的 static 目录下生成一个名为 package.JSON 的文件.
package.JSON 文件有如下几个作用:
跟踪所有的依赖项及其版本.
它可是使其他开发人员了解你的项目, 比如应用的名称, 说明, 所有者和所在存储库的位置.
可以非常容易的通过 NPM 进行自动化安装, 运行和更新.
安装和配置 Webpack
Webpack 是一个模块打包器. 它可以处理你所有的模块依赖, 并生成静态资源. 使用模块打包器可以减少浏览器需要加载的模块数量, 从而大大缩短了网页的加载时间.
演示了 Webpack 是怎样工作的
安装 Webpack:
$ NPM i webpack --save-dev
要使用 Webpack, 我们需要添加一个 Webpack 配置文件. 这个配置告诉 Webpack 在哪里可以找到 JavaScript 和 React 文件, 以及在哪里放置生成的 JavaScript 包.
在 static 目录中添加一个名为 webpack.config.JS 的文件, 下面的内容如下:
const webpack =require('webpack');const config = {entry: __dirname +'/js/index.jsx',output: {path: __dirname +'/dist',filename:'bundle.js', },resolve: {extensions: ['.js','.jsx','.css'] },};module.exports = config;
添加运行命令
- {
- "name":"FullStackTemplate","version":"1.0.0","description":"A Template for creating a Full Stack Web Application using Python, NPM, Webpack and React","main":"index.js","scripts": {
- "build":"webpack -p --progress --config webpack.config.js","dev-build":"webpack --progress -d --config webpack.config.js","test":"echo \"Error: no test specified\"&& exit 1","watch":"webpack --progress -d --config webpack.config.js --watch"
- },"keywords": ["fullstack","template","python","react","npm","webpack" ],"author":"Angela Branaes","license":"MIT","devDependencies": {
- "webpack":"^3.0.0"
- }
- }
- "babel": {
- "presets": ["es2015","react"
- ]
- },
- module: {
- rules: [
- {
- test: /\.jsx?/,
- exclude: /node_modules/,
- use: 'babel-loader'
- }
- ]
- }
- // App.jsximport Reactfrom "react";exportdefaultclassAppextendsReact.Component {
- render () {
- return
- Hello React!
- }
- }
- # server.pyfrom flaskimport Flask, render_templateapp = Flask(__name__, static_folder="../static/dist", template_folder="../static")@App.route("/")defindex():return render_template("index.html")@App.route("/hello")defhello():return"Hello World!"if __name__ == "__main__":
- App.run()
来源: http://www.jianshu.com/p/a2d011c32c21