-
[置顶]软件接口设计怎么做？前后端分离软件接口设计思路
本文关于软件接口设计怎么做？前后端分离软件接口设计思路。好的系统架构离不开好的接口设计，因此，真正懂接口设计的人往往是软件设计队伍中的稀缺型人才。为什么在接口制定标准中说：一流的企业做标准，二流的企业...
-
[置顶]接口管理如何做？接口实现版本管理的意义和最佳方法
本文关于接口管理如何做？接口实现版本管理的意义和最佳方法。API版本管理的重要性不言而喻，对于API的设计者和使用者而言，版本管理都有着非常重要的意义。下面会从WEB API 版本管理的角度提供几种常...
-
[置顶]实现API管理系统的关键
下面将通过几个关键词的形式说明API管理的重要性和未来的实现方式。1.生命周期管理在整个API生命周期中更深入地集成所有工具将进一步提高生命周期循环的速度，而且更重要的是提供满足消费者需求的API。这...
-
-
-
-
bundle.js内容为空
执行命令行：webpack ./entry.js bundle.js
之后会发现bundle.js文件下有好多代码出现，这就是经过webpack打包后的文件。在浏览器打开index.html,页面会出现Hello World，webpack安装成功！
3.配置webpack
创建webpack.config.js文件，进行如下基本配置
module.exports = {
entry: "./entry.js", // 要打包的入口文件
output: { //打包后的文件
path: __dirname, //表示使用绝对路径
filename: "bundle.js" //输出文件名
},
module: {
loaders: [ //用于加载一些静态文件夹（css样式，图片之类）
{ test: /\.css$/, loader: "style!css" },
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/, //不进行转换的文件，可以提高打包速度
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
执行命令：webpack
打开index.html出现Hello World,配置成功。
现在我们的文件目录如下：
4.express下运行
npm install express --save-dev
创建server.js
var express = require('express');
var app = express();
app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
执行命令：
webpack // 用于打包文件
node server.js // 开启服务器
浏览器访问 http://localhost:3000/ ， 页面显示Hello World，运行成功！
5.配置 React, ES6 & Babel 6
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev // 转换JSX
npm install babel-core --save-dev // babel的核心包
npm install babel-preset-es2015-dev // es2015的babel预设
npm install babel-preset-react-dev // react的babel预设
创建文件.babelrc
{
"presets": [
"es2015",
"react"
]
}
接下来就是写react小例子测试啦，在entry.js写入：
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return
}
}
render(
, document.getElementById('app" alt="详解基于webpack搭建react运行环境" title="详解基于webpack搭建react运行环境" width="200" height="150"> -
-
-
