尝试使用运行 Babel 的 Snowpack 为 Internet Explorer 11 网络浏览器转换 Svelte 组件。使用下面的配置。只有src/index.js
文件被转换为 ES5 语法。与 Svelte 框架相关的文件在运行后仍然包含 ES6 和 ESM npm run build
。
关于如何使用 Snowpack 和 Babel 转换 Svelte 相关文件的任何线索?
package.json
{
"scripts": {
"start": "snowpack dev",
"build": "snowpack build"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.12.17",
"@babel/preset-env": "^7.12.17",
"@snowpack/plugin-babel": "^2.1.6",
"@snowpack/plugin-dotenv": "^2.0.5",
"@snowpack/plugin-svelte": "^3.5.0",
"snowpack": "^3.0.1",
"svelte": "^3.24.0"
}
}
snowpack.config.js
module.exports = {
mount: {
// Mount "public" to the root URL path ("/*") /build dir
public: {url: '/', static: true},
// Mount "src" to the root of the /build/dist dir
src: {url: '/dist'},
},
plugins: [
'@snowpack/plugin-svelte',
'@snowpack/plugin-dotenv',
'@snowpack/plugin-babel',
],
optimize: {
preload: false,
bundle: true,
splitting: false,
treeshake: true,
manifest: false,
minify: false,
},
};
babel.config.js
module.exports = function(api) {
api.cache(true);
const presets = [
[
'@babel/preset-env',
{
targets: {
ie: "11"
},
useBuiltIns: "usage",
corejs: 3.6,
modules: false,
}
]
];
const plugins = [
'@babel/plugin-syntax-dynamic-import',
[
'@babel/plugin-transform-runtime', {
useESModules: false,
}
]
];
return {
presets,
plugins,
}
}