您现在的位置是：首页 >技术杂谈 >FlutterWeb实战：03-与流行前端框架集成网站首页技术杂谈

与流行前端框架集成

前端有非常多的框架、工具、库，这些都要比 Dart Web 成熟、丰富。所以在将 Fluttter 编译成 Web 以后，若能使用现有的前端技术实现 web 端的特殊需求，肯定事半功倍。

搭建框架

在开始之前，确保你已经安装好了 node 和 npm

使用 create-react-app 初始化项目

首先使用 create-react-app 创建一个前端项目

npx create-react-app flutter_web

这些创建以下文件

  .eslintrc.js
  build/
  node_modules/
  package.json
  public/
  src/
  yarn.lock

这是一个标准的前端项目，不过不用担心，我们不会使用任何 react 技术。

项目配置

为了能自定义 webpack 打包配置，需要安装一个名为 react-app-rewired 的插件，以替换 react-scripts 脚本

使用 react-app-wired 替换

安装 react-app-wired

npm install -g react-app-rewired

在根目录创建 config-overrides.js 文件，增加以下内容

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function override(config, env) {
   
  // Remove the default HtmlWebpackPlugin
  config.plugins = config.plugins.filter(
    (plugin) => !(plugin instanceof HtmlWebpackPlugin)
  );

  // Add your own HtmlWebpackPlugin instance with your own options
  config.plugins.push(
    new HtmlWebpackPlugin({
   
      template: 'public/index.html'