Как разрешить нестандартный файл javascript - PullRequest
Новая
       65

Как разрешить нестандартный файл javascript

0 голосов
/ 06 мая 2020

Я использую веб-пакет и машинописный текст в своем SPA вместе с пакетом oid c -client npm.

, который имеет такую ​​структуру:

  • oid c -client.d.ts
  • oid c -client. js
  • oid c -client.rsa256. js

Когда я импортирую oid c -client в свой машинописный файл, как показано ниже:

import oid c from 'oid c -client';

Я хочу импортировать версию rsa256, а не стандартную версию, но я не уверен, как это сделать.

в моей конфигурации webpack Я пытался использовать функцию разрешения, но не я Я не уверен, как это правильно использовать: 

const path = require('path'); 
const ForkTsChecker = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');

const shell = require('shelljs');

const outputFolder = 'dist';
const destinationFolder = '../SPA/content';

if (shell.test('-d', outputFolder)) {
    shell.rm('-rf', `${outputFolder}`);
}

if (shell.test('-d', destinationFolder)) {
    shell.rm('-rf', `${destinationFolder}`);
}

module.exports = (env, options) => {
//////////////////////////////////////
/////////// HELP /////////////////////
/////////////////////////////////////

  resolve: {
    oidc =  path.resolve(__dirname, 'node_modules\\oidc-client\\dist\\oidc-    client.rsa256.slim.min.js')

    };

    const legacy = GenerateConfig(options.mode, "legacy", { "browsers": "> 0.5%, IE 11" });

    return [legacy];
}

function GenerateConfig(mode, name, targets) {
    return {
        entry: `./src/typescript/main.${name}.ts`,
        output: {
            filename: `main.${name}.js`,
            path: path.resolve(__dirname, `${outputFolder}`),
            publicPath: '/'
        },
        resolve: {
            extensions: ['.js', '.ts']
        },
        stats: {
            children: false
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.ts\.html?$/i,
                    loader: 'vue-template-loader',
                },
                {
                    test: /\.vue$/i,
                    loader: 'vue-loader'
                },
                {  
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/env',
                                    {
                                        "useBuiltIns": "usage",
                                        "corejs": { version: 3, proposals: true },
                                        "targets": targets
                                    }
                                ],
                                "@babel/typescript"
                            ],
                            plugins: [
                                "@babel/transform-typescript",
                                [
                                    "@babel/proposal-decorators",
                                    {
                                        "legacy": true
                                    }
                                ],
                                    "@babel/plugin-proposal-optional-chaining",
                                "@babel/plugin-proposal-nullish-coalescing-operator",
                                "@babel/proposal-class-properties",
                                "@babel/proposal-numeric-separator",
                                "babel-plugin-lodash",
                                ]
                    }
                }
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, outputFolder),
        compress: true,
        hot: true,
        index: `index.${name}.html`,
        open: 'chrome'
    },
    plugins: [
        new ForkTsChecker({
            vue: true
        }), 
        new HtmlWebpackPlugin({
            filename: `index.${name}.html`,
            template: 'src/index.html',
            title: 'Project Name'
        }),
        new MiniCssExtractPlugin({ filename: 'app.css', hot: true }),
        new VueLoaderPlugin()
    ]
};
}

1 Ответ

0 голосов
/ 09 мая 2020

Добавьте псевдоним, чтобы указать точный. js модуль, который вы хотите импортировать, например: 

resolve: {
    extensions: ['.ts','.js'],
    modules: ['node_modules'],
    alias: {
        'oidc-client': 'oidc-client-js/dist/oidc-client.rsa256.slim'
    }
}

Если вы не укажете псевдоним, webpack / будет следовать разрешение модуля узла , и мы в конечном итоге найдем ваш модуль, перейдя в библиотеку oid c -client- js в node_modules и следуя свойству package. json main, которое равно "lib/oidc-client.min.js" и это не то, что вы хотите.

...