0
votes

WebPack ajoute des rxjs entier à l'ensemble

J'utilise rxjs@6.5.1 code> ( webpack@4.30.0 code>) uniquement dans un endroit avec cette importation:

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var GlobEntries = require('webpack-glob-entries');
var ManifestPlugin = require('webpack-manifest-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');

var entriesRest = {
    "style": "./assets/css/style.scss",
};

var entries = GlobEntries('./assets/js/entries/**/*.ts');

const outputDir = 'public';

const plugins = [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin(),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        popper: 'popper',
        "window.popper": 'popper',
        Popper: 'popper',
        "window.Popper": 'popper',
    }),
    new MiniCssExtractPlugin({
        filename: '../css/style-[contenthash].css',
    }),
    new CleanWebpackPlugin(),
    new ManifestPlugin({
        // publicPath:'../../',
        fileName: '../../' + outputDir + '/manifest.json',
        generate: (seed, files) => {
            const entrypoints = new Set()
            files.forEach(
                (file) => ((file.chunk || {})._groups || []).forEach(
                    (group) => entrypoints.add(group)
                )
            )
            const entries = [...entrypoints]
            const entryArrayManifest = entries.reduce((acc, entry) => {
                const name = (entry.options || {}).name
                    || (entry.runtimeChunk || {}).name
                const files = [].concat(
                    ...(entry.chunks || []).map((chunk) => chunk.files)
                ).filter(Boolean)
                return name ? {...acc, [name]: files} : acc
            }, seed)
            return entryArrayManifest
        }
    }),
    new CopyWebpackPlugin([
        {from: 'node_modules/ckeditor', to: 'ckeditor'},
        {from: 'assets/img', to: '../img'},
        {from: 'assets/index.php', to: '../index.php'},
        {from: 'assets/cron-20min.php', to: '../cron-20min.php'},
        {from: 'assets/js/ads.js', to: '../js/ads.js'},
        {from: 'assets/.htaccess', to: '../[name].[ext]'},
    ]),
];

module.exports = (argv, env) => {
    return {
        plugins: [
            ...plugins,
            env.mode === 'development' ? new BundleAnalyzerPlugin() : [],
        ],
        entry: Object.assign(entriesRest, entries),
        optimization: {
            splitChunks: {
                chunks: "all"
            },
        },
        devtool: env.mode === 'development' ? 'eval' : '',
        output: {
            path: path.resolve(__dirname, outputDir + "/js/"),
            filename: '[name]-[chunkhash].js',//-[hash:6]
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                },
                {
                    test: /\.scss$/i,
                    include: [
                        path.resolve(__dirname, "assets/css/style.scss"),
                    ],
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                hmr: process.env.NODE_ENV === 'development',
                            },
                        },
                        'css-loader', 'sass-loader'
                    ]
                },
                {
                    test: /\.scss$/i,
                    exclude: [
                        path.resolve(__dirname, "assets/css/style.scss"),
                    ],
                    loader: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
                    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=application/font-woff&name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=application/font-woff&name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "file-loader?name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=../css/fonts/[name].[ext]"
                },
                {
                    test: /\.(jpe?g|png|gif|svg|cur)$/i,
                    loaders: [
                        'file-loader?hash=sha512&digest=hex&name=../img/[name].[ext]',
                        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                    ]
                },
                {test: /\.twig$/, loader: "twig-loader"}
            ]
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            alias: {
                'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui'),
            }
        }
    };
};


4 commentaires

Normalement, nous évitons d'importer de cette façon. Pouvez-vous essayer importer debouncetime de "rxjs / opérateurs / debouncimetime"; Si la bibliothèque est activée pour avoir une importation comme celle-ci, il n'y a pas besoin de WebPack ni d'autres outils à configurer.


Ce type d'importation ne fonctionne pas. Il cherche rxjs-compat


Quelle version de WebPack utilisez-vous?


webpack@4.30.0


3 Réponses :


2
votes

J'ai eu les mêmes problèmes il y a quelques jours. Vous ne devez pas utiliser communJs comme compiléroption.Module pour votre TSCONFIG. Essayez ES2015 ou esnext avec noeud moduleresolution.


2 commentaires

Essayé les deux - le même résultat: /


Avez-vous essayé de reconstruire le projet, puis d'analyser le script d'analyse?



0
votes

Je l'ai confirmé à partir de Codesandbox React-TS minimal Projet avec RXJS

My RxJS Taille est de 9,7 Ko après avoir utilisé ce code Entrez la description de l'image ici p> xxx pré>

Mes options de compilateur TSCONFIG.JSON sont P>

compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "noImplicitAny": false,
    "allowJs": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  }


0 commentaires

0
votes

Les paramètres dont j'ai besoin dans les compiléroptions TSCONFIG sont les suivants:

"module": "es6",
"moduleResolution": "node",


0 commentaires