Какая конфигурация должна соблюдаться для веб-пакета для создания библиотеки npm, имеющей реагирующие компоненты? - PullRequest
Новая
       38

Какая конфигурация должна соблюдаться для веб-пакета для создания библиотеки npm, имеющей реагирующие компоненты?

0 голосов
/ 22 января 2020

Мы создаем несколько приложений и решили перенести все наши общие компоненты в библиотеку npm. Мы создаем эти компоненты с машинописью, S CSS и реагируем. Поскольку приложение стало более масштабным, у нас возникают проблемы с размером сборки.

Мой вопрос заключается в том, как мы можем добиться наилучшей оптимизации и минимизации реагирующих компонентов в виде библиотеки npm.

Ниже приведены мои конфигурации веб-пакетов, 

// THIS IS THE COMMON CONFIGURATION FOR DEVELOPMENT AND PRODUCTION ENVIRONMENT


const commonPaths = require("./common-paths");
const commonRules = require("./common-rules");
const webpack = require("webpack");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: "none",

    resolve: {
        extensions: [".js", ".ts", ".tsx", ".json"]
    },

    entry: {
        index: [
            commonPaths.polyFillsPath,
            commonPaths.eventPolyFills,
            commonPaths.projectRoot
        ]
    },

    module: commonRules,

    plugins: [
        new CleanWebpackPlugin(),
        new CaseSensitivePathsPlugin(),
        new webpack.WatchIgnorePlugin([
            /\.js$/,
            /\.d\.ts$/
        ]),
        new CopyWebpackPlugin([
            { from: 'src/delivery-tracking/_assets/img/', to: 'delivery-tracking/_assets/gen/img/' },
            { from: 'src/extras-card/_assets/img/', to: 'extras-card/_assets/gen/img/' },
            { from: 'src/modal/_assets/img/', to: 'modal/_assets/gen/img/' },
            { from: 'src/progress-overlay/_assets/img/', to: 'progress-overlay/_assets/gen/img/' },
            { from: 'src/chat/_assets/img/', to: '_assets/gen/img/' },
        ])
    ]
};

// THIS IS THE CONFIGURATION FOR RUNNING COMPONENTS ON LOCAL MACHINE (MOCK)

const webpack = require("webpack");
const commonPaths = require("./common-paths");
const commonRules = require("./common-rules");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: "development",
    devtool: "cheap-eval-source-map",

    resolve: {
        extensions: [".js", ".ts", ".tsx", ".json"]
    },

    entry: {
        "mock-index": [
            commonPaths.polyFillsPath,
            commonPaths.eventPolyFills,
            commonPaths.projectRoot + "/common-js-page/index.tsx"
        ]
    },

    output: {
        filename: "[name].js",
        libraryTarget: "var"
    },

    module: commonRules,

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/common-js-page/index.html'
        }),
        new webpack.DefinePlugin({
            MODE: JSON.stringify("mock"),
            MOCK_URL: JSON.stringify("http://localhost:5000/priorityOffers"),
            VISION_MOCK: JSON.stringify("http://localhost:5000/visionOffers"),
            VIEW_ALL_OFFERS_URL: JSON.stringify(""),
            BACK_TO_HOME_URL: JSON.stringify(""),
            APPLICATION_BASE_URL: JSON.stringify("")
        }),
        new CopyWebpackPlugin([
            { from: 'src/delivery-tracking/_assets/img/', to: 'delivery-tracking/_assets/gen/img/' },
            { from: 'src/extras-card/_assets/img/', to: 'extras-card/_assets/gen/img/' },
            { from: 'src/modal/_assets/img/', to: 'modal/_assets/gen/img/' },
            { from: 'src/progress-overlay/_assets/img/', to: 'progress-overlay/_assets/gen/img/' },
            { from: 'src/chat/_assets/img/', to: '_assets/gen/img/' },
        ])
    ]
};

// WEBPACK DEVELOPMENT
const webpack = require("webpack");
const path = require("path");

module.exports = {
  mode: "development",

  devtool: "cheap-eval-source-map",

  externals: {
    // Don't bundle react or react-dom
    'react': 'commonjs react',
    'react-dom' : 'commonjs react-dom'
  },

  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    }
  },

  plugins: [
    new webpack.DefinePlugin({
      MODE: JSON.stringify("development"),
      MOCK_URL: JSON.stringify(""),
      VISION_MOCK: JSON.stringify(""),
      VIEW_ALL_OFFERS_URL: JSON.stringify(""),
      BACK_TO_HOME_URL: JSON.stringify(""),
      APPLICATION_BASE_URL: JSON.stringify("")
    })
  ]
};

// WEBPACK PRODUCTION
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const OptimizeCSSAssets = require("optimize-css-assets-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

module.exports = {
  mode: "production",

  optimization: {
    minimizer: [new UglifyJsPlugin()]
  },

  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    }
  },

  externals: {
    // Don't bundle react or react-dom
    'react': 'commonjs react',
    'react-dom' : 'commonjs react-dom'
  },

  plugins: [
    new OptimizeCSSAssets(),
    new webpack.DefinePlugin({
      MODE: JSON.stringify("production"),
      MOCK_URL: JSON.stringify(""),
      VISION_MOCK: JSON.stringify(""),
      VIEW_ALL_OFFERS_URL: JSON.stringify(""),
      BACK_TO_HOME_URL: JSON.stringify(""),
      APPLICATION_BASE_URL: JSON.stringify("")
    })
  ]
};

Использование объединения веб-пакетов для объединения этих файлов. 

const webpackMerge = require("webpack-merge");
const commonConfig = require("./build-utils/webpack.common");

module.exports = ({ mode = "production", addons = [] }) => {
  const flatAddons = [].concat(...[addons]);
  const addonConfigs = flatAddons.map(addon =>
    require(`./build-utils/webpack.${addon}`)
  );
  const modeConfig = require(`./build-utils/webpack.${mode}`);

  if( mode === "mock") {
    return webpackMerge(modeConfig, ...addonConfigs);
  } else {
    return webpackMerge(commonConfig, modeConfig, ...addonConfigs);
  }

  console.log("\n ************** MERGED webpack config ******** ");
  console.log(mergedConfig);
  console.log("********************************************* \n")

};

Общие правила конфигурации веб-пакетов: 

const outputPath = '_assets/gen/img/';
const publicPath = '_assets/gen/img/';

module.exports = {
    rules: [
        {
            test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ott|ttf|ottf|svg)(\?v=\d+.\d+.\d+)?$/,
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
                outputPath: outputPath,
                publicPath: publicPath
            },
            exclude: ["/node_modules/", "/src/"]
        },
        {
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: ["/node_modules/","./"]
        },
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        sourceMap: true,
                        url: false
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                    }
                }
            ]
        }
    ]
};

Пожалуйста, поделитесь оптимальным способом сделать это.

...