Svelte 应用程序无法在 android 版本 6.0.1 或更高版本上运行

Question

我已经在 Svelte 中创建了 Cordova 应用程序演示，但是当我运行 android 6.0.1 或更高版本的应用程序时，应用程序卡在替换屏幕上。

您可以在 link 下方找到检查屏幕和屏幕截图。我已经尝试了很多 babel hacks 来转换...这是 js 许多传播运算符转换但没有解决方案。

出现了很多js问题，下面是两个最重要的问题。

Uncaught Syntax error: Unexpected token ...

Uncaught Syntax error: Undefined token *

https://forum.framework7.io/uploads/default/optimized/2X/5/511119ee16112390bb2bc6ecc4026b3028203e72_2_1380x786.png

我正在使用 Framwork7-CLI 创建一个 Cordova android 应用程序，Framework7 版本是 5.5.0 和最新的 Framwork7 CLI 版本。

目前，我选择了Cordova 和PWA 应用程序以及Tabbed 视图F7 模板。

我的 pacakage.json、babel.config.js 和 webpack.config.js 文件如下。

pacakage.json

{
  "name": "test-app",
  "private": true,
  "version": "1.0.0",
  "description": "Test App",
  "repository": "",
  "license": "UNLICENSED",
  "framework7": {
    "cwd": "/Users/hirenraiyani/demo_apps",
    "type": [
      "pwa",
      "cordova"
    ],
    "name": "Test App",
    "framework": "svelte",
    "template": "tabs",
    "bundler": "webpack",
    "cssPreProcessor": "less",
    "theming": {
      "customColor": false,
      "color": "#007aff",
      "darkTheme": false,
      "iconFonts": true,
      "fillBars": false
    },
    "customBuild": false,
    "webpack": {
      "developmentSourceMap": true,
      "productionSourceMap": true,
      "hashAssets": false,
      "preserveAssetsPaths": false,
      "inlineAssets": true
    },
    "pkg": "io.framework7.myapp",
    "cordova": {
      "folder": "cordova",
      "platforms": [
        "android"
      ],
      "plugins": [
        "cordova-plugin-statusbar",
        "cordova-plugin-keyboard",
        "cordova-plugin-splashscreen",
        "cordova-plugin-wkwebview-engine",
        "cordova-plugin-device",
        "cordova-plugin-inappbrowser",
        "cordova-plugin-file",
        "cordova-plugin-media"
      ]
    }
  },
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build-dev": "cross-env NODE_ENV=development node ./build/build.js",
    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
    "build-dev-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build",
    "build-prod-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
    "android-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova run android",
    "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/"
  },
  "browserslist": [
    "Android >= 5",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "dom7": "^2.1.3",
    "framework7": "^5.5.0",
    "framework7-icons": "^3.0.0",
    "framework7-svelte": "^5.5.0",
    "svelte": "^3.19.2",
    "template7": "^1.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "babel-loader": "^8.0.6",
    "chalk": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cpy-cli": "^3.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "ora": "^4.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "rimraf": "^3.0.2",
    "style-loader": "^1.1.3",
    "svelte-loader": "^2.13.6",
    "terser-webpack-plugin": "^2.3.5",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "workbox-webpack-plugin": "^5.0.0"
  }
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false,
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ],
};

webpack.config.js

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

const path = require('path');

function resolvePath(dir) {
  return path.join(__dirname, '..', dir);
}

const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova = target === 'cordova';


module.exports = {
  mode: env,
  entry: {
    app: './src/js/app.js',
  },
  output: {
    path: resolvePath(isCordova ? 'cordova/www' : 'www'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
    publicPath: '',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json',
  },
  resolve: {
    extensions: ['.mjs', '.js', '.svelte', '.json'],
    alias: {

      '@': resolvePath('src'),
    },
    mainFields: ['svelte', 'browser', 'module', 'main']
  },
  devtool: env === 'production' ? 'source-map' : 'eval',
  devServer: {
    hot: true,
    open: true,
    compress: true,
    contentBase: '/www/',
    disableHostCheck: true,
    historyApiFallback: true,
    watchOptions: {
      poll: 1000,
    },
  },
  optimization: {
    minimizer: [new TerserPlugin({
      sourceMap: true,
    })],
  },
  module: {
    rules: [
      {
        test: /\.(mjs|js|jsx)$/,
        use: 'babel-loader',
        include: [
          resolvePath('src'),
          resolvePath('node_modules/framework7'),


          resolvePath('node_modules/framework7-svelte'),
          resolvePath('node_modules/svelte'),
          resolvePath('node_modules/template7'),
          resolvePath('node_modules/dom7'),
          resolvePath('node_modules/ssr-window'),
        ],
      },

      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
          },
        },
      },

      {
        test: /\.css$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.styl(us)?$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'stylus-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(sa|sc)ss$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'images/[name].[ext]',

        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[ext]',

        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]',

        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env),
      'process.env.TARGET': JSON.stringify(target),
    }),

    ...(env === 'production' ? [
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true,
          map: { inline: false },
        },
      }),
      new webpack.optimize.ModuleConcatenationPlugin(),
    ] : [
      // Development only plugins
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
    ]),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: true,
      minify: env === 'production' ? {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      } : false,
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new CopyWebpackPlugin([
      {
        from: resolvePath('src/static'),
        to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
      },
      {
        from: resolvePath('src/manifest.json'),
        to: resolvePath('www/manifest.json'),
      },
    ]),
    ...(!isCordova ? [
      new WorkboxPlugin.InjectManifest({
        swSrc: resolvePath('src/service-worker.js'),
      })
    ] : []),

  ],
};

Answer 1

经过 5 天的工作，这个解决方案终于奏效了...

package.json 检查以下内容添加 浏览器列表 如果没有添加，

"browserslist": [
    "Android >= 5",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],

在依赖项上添加 core-js，

"dependencies": {
    "core-js": "^3.6.4",
    ....
}

check **devdependencies**,
"devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "babel-loader": "^8.0.6",
    ...
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "modules": false,
      "corejs": 3,
      "useBuiltIns": "usage",
      "targets": {
        "browsers": [
          "> 0.5%",
          "last 2 major versions",
          "safari >= 9",
          "not ie <= 11",
          "not dead"
        ]
      }
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ],
};

最重要webpack.config.js 在 module.exports JSON 上检查以下规则

 module: {
    rules: [
    ....
    {
        test: /\.svelte$/,
        use: [
          'babel-loader',
          {
            loader: 'svelte-loader',
            options: {
              hotReload: false,
              emitCss: true,
            },
          },
        ],
      },
      ....

现在用 svelte 和 f7 重建你的 Cordova 应用程序，一切正常。

Svelte 应用程序无法在 android 版本 6.0.1 或更高版本上运行

Svelte application not working on android version 6.0.1 or Later

cordova

webpack

babeljs

html-framework-7

svelte