水平有限,如果存在問(wèn)題歡迎大家訪問(wèn)我的博客批評(píng)指正.
背景
使用svelte開(kāi)發(fā)了一個(gè)網(wǎng)站,并且需要進(jìn)行Android端app轉(zhuǎn)換,為了簡(jiǎn)單就采用了cordova來(lái)進(jìn)行封裝.
一切就緒,但是編譯后,嗯?白屏.
經(jīng)過(guò)分析與查證,估計(jì)問(wèn)題出在我的手機(jī)上,因?yàn)樘峁┑臏y(cè)試機(jī)是7.0的系統(tǒng),貌似webview對(duì)于ES6的支持還不是很好,會(huì)不會(huì)是這原因的,先試試再說(shuō).
大家了解,涉及到ES6兼容的問(wèn)題我們首先想到babel,我現(xiàn)在要做的就是將babel轉(zhuǎn)義集成進(jìn)rollup.
Babel是一個(gè)工具鏈柿估，主要用于在當(dāng)前和較舊的瀏覽器或環(huán)境中將ECMAScript 2015+代碼轉(zhuǎn)換為JavaScript的向后兼容版本循未。
但是哪些代碼需要轉(zhuǎn)譯？我們需要考慮兩個(gè)級(jí)別的移植：
1.我們應(yīng)用的代碼
如果您在應(yīng)用中使用ES6及更高版本的代碼秫舌，則需要進(jìn)行轉(zhuǎn)義的妖。這包括您的.svelte文件和.js文件。
2.依存關(guān)系
如果應(yīng)用的依賴(lài)模塊也就是與應(yīng)用程序捆綁在一起的代碼使用了ES6語(yǔ)法足陨，則它們也將導(dǎo)致最終編譯的bundle.js中包含未編譯的代碼嫂粟。順便提一下，下面是Babel對(duì)外部依賴(lài)的看法：
理想情況下墨缘，你應(yīng)該只轉(zhuǎn)換你的源代碼办悟，而不是通過(guò)Babel運(yùn)行你所有的外部依賴(lài)-因此排除:
' node_modules/** '
我們鼓勵(lì)庫(kù)作者不要發(fā)布使用未轉(zhuǎn)換ES6特性的代碼(除了模塊)颈娜。您的庫(kù)的使用者不應(yīng)該必須調(diào)換您的ES6代碼凿试，就像他們不應(yīng)該調(diào)換您的CoffeeScript揩徊、ClojureScript或TypeScript一樣。
不幸的是總有一些頑固分子,就像axios：
直到0.6.0版本為止蝶棋，都是使用es6-promise來(lái)解決ES6 Promise卸亮。 但在此版本中，polyfill已被刪除玩裙，如果您的環(huán)境需要兼贸，您需要自己提供段直。
解決方案
以下配置我已經(jīng)正常使用，成功編譯了我的cordova應(yīng)用溶诞。
1.安裝依賴(lài)項(xiàng)
首先鸯檬，讓我們安裝所需的babel軟件包和匯總插件。
npm i -D @babel/core @babel/preset-env rollup-plugin-babel core-js
2.配置babel
根目錄創(chuàng)建或者修改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']
}),
]
};
