与流行前端框架集成
前端有非常多的框架、工具、库，这些都要比 Dart Web 成熟、丰富。所以在将 Fluttter 编译成 Web 以后，若能使用现有的前端技术实现 web 端的特殊需求，肯定事半功倍。
搭建框架
在开始之前，确保你已经安装好了 node 和 npm
使用 create-react-app 初始化项目
首先使用 create-react-app 创建一个前端项目
1
| npx create-react-app flutter_web
|
这些创建以下文件
1
2
3
4
5
6
7
| .eslintrc.js
build/
node_modules/
package.json
public/
src/
yarn.lock
|
这是一个标准的前端项目，不过不用担心，我们不会使用任何 react 技术。
项目配置
为了能自定义 webpack 打包配置，需要安装一个名为 react-app-rewired 的插件，以替换 react-scripts 脚本
使用 react-app-wired 替换
安装 react-app-wired
1
| npm install -g react-app-rewired
|
在根目录创建 config-overrides.js 文件，增加以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function override(config, env) {
config.plugins = config.plugins.filter(
(plugin) => !(plugin instanceof HtmlWebpackPlugin)
);
config.plugins.push(
new HtmlWebpackPlugin({
template: 'public/index.html',
minify: {
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: false,
minifyCSS: true,
minifyURLs: true,
},
})
);
return config;
};
|
这里面引入一个名为 html-webpack-plugin 的插件，配置了需要压缩的内容。
替换 package.json 中 scripts 部分
1
2
3
4
5
6
7
8
9
| "scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
|
初始化 Flutter
在当前项目目录下，执行以下命令初始化 Flutter 项目
1
| flutter create --platforms web .
|
这将创建一个 Flutter 项目，并添加了 web 平台支持。
以下目录由 flutter 创建
1
2
3
4
5
| Recreating project ....
pubspec.yaml (created)
lib/main.dart (created)
web/
analysis_options.yaml (created)
|
集成
现在，虽然两个项目共用一个目录，但我们需要修改一些配置，才将 flutter 项目与前端项目集成在一起工作。
编辑 package.json 文件中scripts/build 处的内容，改为
“rm -rf build && rm -rf web && react-app-rewired build && mv build web”，
同时删除不需要的依赖, 增加 react-app-rewired 依赖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| "dependencies": {
- "cra-template": "1.2.0",
- "react": "^19.0.0",
- "react-dom": "^19.0.0",
"react-scripts": "5.0.1"
},
"eslintConfig": {
"extends": [
- "react-app",
- "react-app/jest"
]
},
+ "devDependencies": {
+ "react-app-rewired": "^2.2.1"
+ }
|
运行 npm install 或 yarn install, 更新依赖。
这行命令的作用是，构建时先清理当前项目目录 build 和 web 目录，构建完成后将前端构建目录改名为 web，以提供给 flutter 进一步构建使用。
最终，经过一番折腾， package.json 文件中的内容如下面所示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| {
"name": "flutter_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "rm -rf build && rm -rf web && react-app-rewired build && mv build web",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": [
]
},
...
"devDependencies": {
"react-app-rewired": "^2.2.1"
}
}
|
接下来我们复制 web 目录并替换掉 public 目录。
1
2
| rm -rf public
cp -r web public
|
运行 npm run build, 如果能成功生成 web 目录，代表集成成功
前端开发
前面的准备工作完成以后，就可以愉快的开发了！
进入 src 目录，这里面就可以编写我们的前端代码了，也可以使用 npm 的任何 js 库。
为了统一维护 js，我们把 flutter web 的初始化代码从 html 中移到这里。
首先清空 src 目录中的文件，然后新建一个 index.js, 添加以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| window.flutterWebRenderer = "html";
window.addEventListener('load', function(ev) {
_flutter.loader.loadEntrypoint({
entrypointUrl: 'main.dart.js',
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
|
项目构建
1
2
3
4
|
npm run build
flutter clean && flutter build web --build-number=$VERSION_CODE --build-name=$TAG --web-renderer html --profile --base-href /webapp/
|
上述命令中， 和 都是环境变量，需要提前设置好
1
2
| export VERSION_CODE=1
export TAG=1.0.0
|
这里需要注意的是，如果你不希望通过子目录访问 Flutter web 应用，那么需要将 base-href 设置为 /，或者移除该选项
1
| flutter clean && flutter build web --build-number=$VERSION_CODE --build-name=$TAG --web-renderer html --profile
|
源码获取
https://gitee.com/zacks/flutter-web-demo
参考资料