Svelte for IE11 在 Snowpack 上使用 Babel 转译器

Question

尝试使用 Snowpack 运行 Babel 为 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,
    }
}

Answer 1

关键是要用@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')
              },
              {
                loader: path.resolve(__dirname, './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!

Svelte for IE11 在 Snowpack 上使用 Babel 转译器

Svelte for IE11 with Babel transpiler on Snowpack

babeljs

svelte

svelte-3

snowpack