node的前一篇写过配置node的跨域，今天我们在上一篇的基础上进行重构让node支持模块化的导入导出(import/export)。
首先我把目录进行了比较大的调整
1.png
创建一个server文件夹下面放了两个js文件名字自定义，因为我们如果用node做开发的话不可能把所有功能全都写到一个文件中，这样不便于维护，这次用上次的跨域代码写个实例，将上次的代码拆分到两个文件中。
我的server文件夹下面就是放的跨域代码，express.js是实现主要功能的文件，index.js类似于一个入口文件，监听端口的地方。我们先来安装配置一下node模块化所需要的依赖文件。
在终端输入下面的代码安装：
cnpm i -S babel-node babel-cli babel-preset-env babel-plugin-add-module-exports 或
npm i -S babel-node babel-cli babel-preset-env babel-plugin-add-module-exports 或
yarn add babel-node babel-cli babel-preset-env babel-plugin-add-module-exports
然后在根目录下新建一个配置文件.babelrc,加入以下配置
{
"presets": ["env"],//解析es6
"plugins": ["add-module-exports"]//支持export
}
接着修改package.json里面的start启动命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node server/index.js"
},
babel-node是我刚刚安装的一个依赖，用来调用.babelrc编译代码让node对导入导出进行支持。
express.js文件
import bodyParser from "body-parser"
import util from "util"
export default (express) => {
const app = express();
var allowCrossDomain = function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');//自定义中间件，设置跨域需要的响应头。
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE'); //允许任何方法
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token'); //允许任何类型
next();
};
app.use(allowCrossDomain);
app.use(bodyParser.json());//解析json
app.use(bodyParser.urlencoded({extended:true}))//解析表单
app.get("/",(req, res) => {
res.send("这是首页");
})
app.listenAsync = util.promisify(app.listen);
return app;
}
index.js文件
import express from "express"
import myexpress from "./express"
const server = myexpress (express);
server.listenAsync(3000).then(()=>console.log("http://localhost:3000")););
大家可能发现在express中引入了一个util,他是node为我们提供的一个api，在页面中我调用了他的util.promisify()方法，这个方法跟我们的es6中的promise很像，是为了处理一些异步的事件。因为这次数据操作和端口监听放到了不同的文件，为了保障当数据操作执行完成后才进行端口监听所以我们需要返回一个promise的事件。
在终端执行命令
npm run start
在浏览器输入http://localhost:3000/
显示如下证明重构成功
2.png
网友评论