将模块文件/流的内容读入 BLOB答案

【问题标题】：Read the contents of the module file/stream into a BLOB将模块文件/流的内容读入 BLOB
【发布时间】：2021-11-07 17:23:40
【问题描述】：

我创建一个 BLOB 文件并在那里编写 JavaScipt 代码，然后创建一个 URL 并从中导入模块。

const myJSFile = new Blob( [ 'export default true;' ], { type: 'application/javascript' } );
const myJSURL = URL.createObjectURL( myJSFile );
import( myJSURL ).then(async ( module ) => {
    console.log( module.default );
});

这在浏览器控制台中效果很好。但是，我在使用 Webpack 构建项目时遇到了问题。

我怀疑问题出在 WebPack 或 Babel 配置上。

Webpack 常用配置：

const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    // Where webpack looks to start building the bundle
    entry: [
        'core-js/modules/es6.promise',
        'core-js/modules/es6.array.iterator',
        './src/main.js',
    ],
    target: 'web',
    // Where webpack outputs the assets and bundles
    output: {
        path: path.resolve(__dirname, 'dist'),
        assetModuleFilename: '[name].[contenthash].[ext]',
        filename: '[name].[contenthash].bundle.js',
        chunkFilename: '[id].[chunkhash].bundle.js',
        // publicPath: '/',
    },

    // Determine how modules within the project are treated
    module: {
        rules: [
            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/images/'
                        }
                    }
                ]
            },

            // JavaScript: Use Babel to transpile JavaScript files
            { test: /\.js$/, use: ['babel-loader'] },

            // Images: Copy image files to build folder
            { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },

            // Fonts and SVGs: Inline files
            { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
        ],
    },

    // Customize the webpack build process
    plugins: [
        // Generates an HTML file from a template
        new HtmlWebpackPlugin({
            // template: path.resolve(__dirname, 'src/index.html'), // шаблон
            template: 'src/index.html',
            // filename: 'index.html', // название выходного файла
            // inject: false, // true, 'head'
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            },
            // chunks: 'all',
            // excludeChunks: [],
        }),


        new CopyWebpackPlugin(
            {
                patterns: [
                    { from: 'src/assets', to: 'assets' },
                    // { from: 'src/components', to: 'components' },
                ]
            }
        ),
    ],

    resolve: {
        // modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        extensions: ['.js', '.jsx', '.json', '.ts'],
        alias: {
            '@': [
                path.resolve(__dirname, 'src'),
                './src/main.js'
            ],
        },
    },
}

Babel 配置

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-runtime',
    "@babel/plugin-syntax-dynamic-import"
  ]
};

【问题讨论】：

标签： javascript webpack import babeljs

【解决方案1】：

我之前使用过require-from-string，内部使用uses the native Module module 来实现这一点。

一般来说，Blob 在浏览器和节点域之间并不能很好地互操作，并且模块也没有被同等对待。所以 Blob+模块有问题也就不足为奇了。 :)

【讨论】：