写在前面
在搭建此框架前，你必须要安装NodeJS、VSCode。会使用TypeScript、React、Less。
1. 初始化框架搭建
初始化框架搭建请参考《create-react-app4.x搭建react开发框架》
2.添加路由
- 安装库
npm install react-router-dom --save
npm install @types/react-router-dom --save-dev
- 添加测试页面HomePage.tsx
import { Button } from "antd"
import React from "react"
export interface HomePageProps {
}
export interface HomePageState {
}
export default class HomePage extends React.Component<HomePageProps, HomePageState>{
constructor(props: HomePageProps) {
super(props)
this.state={
}
}
render() {
return <Button>
我是首页
</Button>
}
}
- 修改App.tsx
import { Spin } from 'antd';
import React, { Suspense } from 'react';
import { BrowserRouter, Route } from "react-router-dom";
import './App.less';
function App() {
return <Suspense fallback={<Spin spinning={true}></Spin>}>
<BrowserRouter>
<Route path={"/"} component={React.lazy(() => import("./page/home"))}>
</Route>
</BrowserRouter>
</Suspense>
}
export default App;
至此，一个简易的React+TypeScript+Less框架就算搭建完成了，你可以开发任何Web应用了。赶快开启你的Web之旅吧。
3.集成SuperMap iClient3D for WebGL
-
将安装包解压，放在public目录下
-
在index.html中添加
<link href="/SuperMapCesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script type="text/javascript" src="/SuperMapCesium/Build/Cesium/Cesium.js"></script>
- 修改声明文件react-app-env.d.ts，保证Cesium全局变量不报错
declare var Cesium: any;
- 根据官方示例编写测试组件Home.tsx
import React from "react"
export interface HomeProps {
}
export interface HomeState {
}
export class Home extends React.Component<HomeProps, HomeState>{
constructor(props: HomeProps) {
super(props)
this.state={
}
}
componentDidMount(){
const viewer = new Cesium.Viewer('cesiumContainer',{
//创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
terrainProvider : new Cesium.CesiumTerrainProvider({
url : 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/DatasetDEM',
isSct : true,//地形服务源自SuperMap iServer发布时需设置isSct为true
invisibility:true
}),
});
//添加SuperMap iServer发布的影像服务
viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url : 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/MosaicResult'
}));
viewer.scene.camera.setView({
destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation : {
heading : 1.4059101895600987,
pitch : -0.20917672793046682,
roll : 2.708944180085382e-13
}
});
const viewModel = {
color : '#ffffff',
tolerance : 0
};
Cesium.knockout.track(viewModel);
}
render() {
return <div id={"cesiumContainer"}>
</div>
}
}
- 修改HomePage组件
import React from "react"
import { Home } from "../../components"
export interface HomePageProps {
}
export interface HomePageState {
}
export default class HomePage extends React.Component<HomePageProps, HomePageState>{
constructor(props: HomePageProps) {
super(props)
this.state = {
}
}
componentDidMount() {
}
render() {
return <Home />
}
}
-
预览效果
4.构建npm包用途：只专注于写基础组件，供多业务项目调用
-
安装相关依赖
npm install gulp --save-dev
npm install uglifyjs-webpack-plugin --registry https://registry.npm.taobao.org --save-dev
npm install awesome-typescript-loader --save-dev -
添加release.js文件
const path = require('path');
const webpack = require('webpack');
const pkg = require('./package.json');
const { CheckerPlugin } = require('awesome-typescript-loader');
const ignores = Object.assign(pkg.devDependencies, pkg.dependencies);
const UglifyESPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
output: {
path: path.join(process.cwd(), 'dist'),
filename: `${pkg.name}.js`,
library: `${pkg.name}`,
libraryTarget: "umd"
},
module: {
rules: [
{ test: /\.tsx?$/, use: 'awesome-typescript-loader?silent=true&declaration=true&declarationDir=libTmp' },
{ test: /\.css$/, use: ['style-loader', 'css-loader?minimize'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader?minimize', 'less-loader'] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [
new CheckerPlugin(),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyESPlugin({
// 多嵌套了一层
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true, //生产环境自动删除console
},
warnings: false,
},
sourceMap: false,
parallel: true,//使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
}),
new webpack.optimize.AggressiveMergingPlugin(),//合并块
],
entry: ['./src/components/index.ts'],
externals: [ignores]
}
- 添加gulpfile.js文件
'use strict';
const path = require('path');
const gulp = require('gulp');
const del = require('del');
const mv = require('mv');
const gutil = require('gutil');
const webpack = require('webpack');
const webpackDistConf = require('./release.js');
const browserSync = require('browser-sync');
const spa = require('browser-sync-spa');
const dist = path.resolve("../libs");
browserSync.use(spa());
gulp.task('clean', () => {
return del(['./lib', './libTmp', './dist']);
});
gulp.task('build', (done) => {
const webpackBundler = webpack(webpackDistConf);
const webpackChangeHandler = (err, stats) => {
if (err) {
gutil.log(err);
}
gutil.log(stats.toString({
colors: true,
chunks: false,
hash: false,
version: false
}));
mv('./libTmp', './lib', { clobber: true }, (err) => {
if (err) {
console.log(err);
} else {
del('./libTmp');
}
done();
})
};
webpackBundler.run(webpackChangeHandler);
});
gulp.task("copy", function () {
return gulp.src([
".\\dist\\**",
".\\lib\\**",
"./package.json",
]).pipe(gulp.dest(dist));
});
gulp.task('cleanLibs', () => {
return del(["..\\libs\\dist\\**", "..\\libs\\lib\\**", "..\\libs\\package.json", "..\\libs\\README.md"], { force: true });
});
gulp.task('default', gulp.series('clean', "cleanLibs", 'build', "copy"));
- package.json中添加如下脚本
"release": "node node_modules/gulp/bin/gulp.js default" - 预览打包完的npm包
注意事项
- 如出现“Could not find a declaration file for module ‘react/jsx-runtime’. ‘F:/witcode/npmBag/…/node_modules/react/jsx-runtime.js’ implicitly has an ‘any’ type.
If the ‘react’ package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`”,请修改声明文件的版本如下："@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", - 如出现“Cannot use JSX unless the ‘–jsx’ flag is provided.ts(17004)”，请修改.vscode文件夹下的setting.json内容如下：
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}
- 如出现“If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your”，在项目中创建一个 .env 的文件，里面写上
SKIP_PREFLIGHT_CHECK=true - 如出现“Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory”
方案一：
- 打开cmd窗口
- 运行 setx NODE_OPTIONS --max_old_space_size=10240
- 关闭所有cmd /代码编辑器
- 重新打开cmd并再次运行节点命令（npm等）
方案二
- package.json中添加
node --max-old-space-size=6000 node_modules/cross-env/src/bin/cross-env.js PORT=8888 craco start