Я создал демонстрационную версию приложения Cordova в Svelte, но когда я запускаю приложение на android 6.0.1 или более поздней версии, приложение застревает на экране splace.
Вы можете найти экран проверки, скриншот по ссылке ниже. Я пытался преобразовать многие вавилонские хаки ... это js многие операторы спреда для конвертации, но ни одно решение не сработало.
Существует много js проблем, из которых две наиболее важные проблемы приведены ниже .
Uncaught Синтаксическая ошибка: неожиданный токен ...
Uncaught Синтаксическая ошибка: неопределенный токен *
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 с шаблоном представления с вкладками F7.
My 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'),
})
] : []),
],
};