React Native 三端同构实战（3）reactxp 接入
|
- UID
- 1066743
|
React Native 三端同构实战（3）reactxp 接入
reactxp 接入由于 reactxp 所有暴露的 API 都支持在 Web 平台和 React Native 平台同时正常运行，因此为 reactxp 应用转 Web 的方法非常简单，只需为项目加入 webpack 构建和运行 Web 页面的 index.html 文件。
reactxp 的 webpack 配置文件如清单 1 所示：
清单 1. reactxp 的 webpack 配置文件 webpack.config.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| module.exports = {
entry: "./src/index.tsx",
mode: "development",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
resolve: {
// 优先加载 web.js 后缀的文件
extensions: [".web.js", ".ts", ".tsx", ".js"]
},
module: {
rules: [
// 转换 TypeScript 文件
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
]
}
};
|
再写一个运行 Web 页面的 index.html 文件，内容如清单 2 所示：
清单 2. reactxp 平台启动入口文件 index.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
html, body, .app-container {
width: 100%;
height: 100%;
padding: 0;
border: none;
margin: 0;
}
*:focus {
outline: 0;
}
</style>
</head>
<body>
<div class="app-container"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
|
完整的例子可以参考 reactxp 的 。 |
|
|
|
|
|
