如何解决Svelte for IE11 with Babel transpiler on Snowpack
尝试使用运行 Babel 的 Snowpack 为 Internet Explorer 11 网络浏览器转译 Svelte 组件。使用下面的配置。只有 src/index.js 文件被转换为 ES5 语法。运行 npm run build 后，与 Svelte 框架相关的文件仍包含 ES6 和 ESM。
有关如何使用 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,}
}
解决方法
关键是使用@snowpack/plugin-webpack。答案如下。
package.json
{
"scripts": {
"dev": "snowpack dev","start": "snowpack build --watch","build": "snowpack build"
},"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.13","@babel/preset-env": "^7.12.17","@snowpack/plugin-babel": "^2.1.6","@snowpack/plugin-svelte": "^3.5.2","@snowpack/plugin-webpack": "^2.3.0","babel-loader": "^8.2.2","snowpack": "^3.0.13","svelte": "^3.34.0"
}
}
snowpack.config.js
const path = require('path');
module.exports = {
mount: {
// Mount "public" to the root URL path ("/*") /build dir
public: {url: '/',static: true},// Mount "src" to the root of the /build dir
src: {url: '/'},},plugins: [
"@snowpack/plugin-svelte","@snowpack/plugin-babel",[
'@snowpack/plugin-webpack',{
outputPattern: {
js: "index.js",css: "index.css",extendConfig: config => {
delete config.optimization.splitChunks;
delete config.optimization.runtimeChunk;
config.module.rules[0] = {
test: /\.js$/,exclude: /node_modules/,use: [
{
loader: 'babel-loader',options: { presets: ['@babel/preset-env'] }
},{
loader: path.resolve(__dirname,'./node_modules/@snowpack/plugin-webpack/plugins/import-meta-fix.js')
},'./node_modules/@snowpack/plugin-webpack/plugins/proxy-import-resolve.js')
}
]
}
return config;
}
}
]
],optimize: {
preload: false,bundle: false,splitting: false,treeshake: true,manifest: false,minify: false,};
babel.config.json
{
"presets": [
[
"@babel/preset-env",{
"targets": {
"ie": "11"
},"modules": false
}
]
],"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="Web site created using create-snowpack-app" />
<title>Snowpack App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/index.js"></script>
</body>
</html>
npm run build 的输出
> build
> snowpack build
[snowpack] ! building source files...
[snowpack] ✔ build complete [0.38s]
[snowpack] ! building dependencies...
[snowpack] ✔ dependencies ready! [0.26s]
[snowpack] ! verifying build...
[snowpack] ✔ verification complete [0.00s]
[snowpack] ! writing build to disk...
[snowpack] ! optimizing build...
Asset Size Chunks Chunk Names
index.css 228 bytes 0 [emitted] index
index.js 7.93 KiB 0 [emitted] index
[snowpack] ✔ optimize complete [1.78s]
[snowpack] ▶ Build Complete!
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
