svelte应用封装安卓App之rollup中的babel集成

水平有限,如果存在问题欢迎大家访问我的博客批评指正.

背景

使用svelte开发了一个网站,并且需要进行Android端app转换,为了简单就采用了cordova来进行封装.

一切就绪,但是编译后,嗯?白屏.

经过分析与查证,估计问题出在我的手机上,因为提供的测试机是7.0的系统,貌似webview对于ES6的支持还不是很好,会不会是这原因的,先试试再说.

大家了解,涉及到ES6兼容的问题我们首先想到babel,我现在要做的就是将babel转义集成进rollup.

Babel是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本。

但是哪些代码需要转译？我们需要考虑两个级别的移植：

1.我们应用的代码
如果您在应用中使用ES6及更高版本的代码，则需要进行转义。这包括您的.svelte文件和.js文件。

2.依存关系
如果应用的依赖模块也就是与应用程序捆绑在一起的代码使用了ES6语法，则它们也将导致最终编译的bundle.js中包含未编译的代码。顺便提一下，下面是Babel对外部依赖的看法：

理想情况下，你应该只转换你的源代码，而不是通过Babel运行你所有的外部依赖-因此排除:' node_modules/** '
我们鼓励库作者不要发布使用未转换ES6特性的代码(除了模块)。您的库的使用者不应该必须调换您的ES6代码，就像他们不应该调换您的CoffeeScript、ClojureScript或TypeScript一样。

不幸的是总有一些顽固分子,就像axios：

直到0.6.0版本为止，都是使用es6-promise来解决ES6 Promise。 但在此版本中，polyfill已被删除，如果您的环境需要，您需要自己提供。

解决方案

以下配置我已经正常使用，成功编译了我的cordova应用。

1.安装依赖项

首先，让我们安装所需的babel软件包和汇总插件。

npm i -D @babel/core @babel/preset-env rollup-plugin-babel core-js

2.配置babel

根目录创建或者修改babel.config.js文件：

module.exports = function (api) {
    api.cache(true);
    const presets = [
        ["@babel/preset-env", {
            // "debug": true,
            useBuiltIns: "usage",
            corejs: 3, // or 2,
            targets: {
                browsers: "last 2 versions",
            }
        }]
    ];
    return {
        presets
    }
}

3.配置rollup

修改rollup.config.js文件:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import replace from 'rollup-plugin-replace';
import babel from 'rollup-plugin-babel';


export default {
    ...
    plugins: [
        ...
        production && babel({
            exclude: [
                // 'node_modules/**',
                /\/core-js\//,
            ],
            extensions: ['.svelte', '.js', '.jsx', '.es6', '.es', '.mjs', '.ts']
        }),
    ]
};