Как удалить ненужные библиотеки из рабочей сборки webpack v5
2 После производственной сборки проекта с использованием Webpack v5 пакеты, которые не нужны в сборке продукта, попадают в окончательную сборку. Например, typescript. webpack.common:
const DotenvPlugin = require('dotenv-webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const paths = require('./paths'); module.exports = < context: paths.appPath, entry: paths.appIndexJs, output: < path: paths.appBuild, publicPath: paths.publicUrlOrPath, >, resolve: < alias: < 'core-js/es6': 'core-js/es', >, modules: [paths.appNodeModules, paths.appSrc], extensions: paths.moduleFileExtensions.map((extension) => `.$`), plugins: [new TsconfigPathsPlugin()], fallback: < crypto: false >, >, devServer: < host: process.env.HOST, port: process.env.PORT, compress: true, allowedHosts: 'all', >, module: < rules: [ < test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, include: paths.appSrc, loader: 'babel-loader', options: < presets: ['@babel/preset-env'], cacheDirectory: true, cacheCompression: false, compact: false, >, >, < test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: 'file-loader', options: < limit: 10000, name: 'assets/[name].[contenthash:8].[ext]', >, >, < test: /\.(ttf|eot|woff|woff2|)$/, use: < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'fonts/', >, >, >, < test: /\.svg$/, use: [ < loader: require.resolve('@svgr/webpack'), >, < loader: require.resolve('url-loader'), options: < limit: 10000, name: 'assets/[name].[contenthash:8].[ext]', >, >, ], >, ], strictExportPresence: true, >, plugins: [ new HtmlWebpackPlugin(< inject: true, template: paths.appHtml, favicon: paths.appFavicon, >), new DotenvPlugin(< path: paths.dotenv, expand: true, systemvars: true, >), ], >; webpack.prod:
const webpack = require('webpack'); const < merge >= require('webpack-merge'); const < CleanWebpackPlugin >= require('clean-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const SentryWebpackPlugin = require('@sentry/webpack-plugin'); const < BundleAnalyzerPlugin >= require('webpack-bundle-analyzer'); const CompressionPlugin = require('compression-webpack-plugin'); const common = require('./webpack.common'); class DeleteSourceMapWebpackPlugin < constructor() <>apply(compiler) < compiler.hooks.done.tap('DeleteSourceMapWebpackPlugin', (stats) => < const fs = require('fs'); const path = require('path'); const directoryPath = path.join(__dirname, '../build/js/'); fs.readdir(directoryPath, (err, files) => < console.log('files', files); files .filter((name) =>/\.js\.map$/.test(name)) .forEach((file) => < console.log('file', file); fs.unlinkSync(directoryPath + file); >); >); console.log('⭐⭐⭐deleted map file'); >); > > function makeRelease(length) < let result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const charactersLength = characters.length; for (let i = 0; i < length; i++) < result += characters.charAt(Math.floor(Math.random() * charactersLength)); >return result; > module.exports = merge(common, < mode: 'production', bail: true, devtool: false, output: < filename: 'js/[name].[contenthash:8].js', chunkFilename: 'js/[name].[contenthash:8].chunk.js', >, optimization: < minimize: true, minimizer: [ new TerserPlugin(< terserOptions: < parse: < ecma: 8, >, compress: < // ecma: 5, ecma: 2015, // warnings: false, comparisons: false, inline: 2, >, mangle: < safari10: true, >, output: < ecma: 5, comments: false, ascii_only: true, >, >, >), new OptimizeCSSAssetsPlugin(< cssProcessorOptions: < map: false, >, cssProcessorPluginOptions: < preset: ['default', < minifyFontValues: < removeQuotes: false >>], >, >), ], splitChunks: < chunks: 'all', >, runtimeChunk: < name: (entrypoint) =>`runtime-$`, >, >, module: < rules: [ < test: /\.css$/, use: [ 'style-loader', < loader: 'css-loader', options: < sourceMap: false, >, >, ], >, < test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', < loader: 'sass-loader', options: < sourceMap: false, >, >, ], >, < test: /\.m?js/, resolve: < fullySpecified: false, >, >, ], >, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin(< filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[name].[contenthash:8].chunk.css', >), new webpack.DefinePlugin(< 'process.env': < NODE_ENV: JSON.stringify('production'), >, >), new ForkTsCheckerWebpackPlugin(< async: false, typescript: < memoryLimit: 4096, >, >), new DeleteSourceMapWebpackPlugin(), new BundleAnalyzerPlugin(< statsOptions: < source: false >, analyzerMode: process.env.STATS || 'disabled', >), new CompressionPlugin(), ], >); мой package.json:
< "name": "eva", "version": "0.1.0", "private": true, "dependencies": < "@babel/runtime": "7.18.0", "@fortawesome/fontawesome-svg-core": "6.1.0", "@fortawesome/free-brands-svg-icons": "6.1.0", "@fortawesome/free-regular-svg-icons": "6.1.0", "@fortawesome/free-solid-svg-icons": "6.1.0", "@fortawesome/react-fontawesome": "0.1.18", "@icons/material": "0.4.1", "@material-ui/core": "4.9.2", "@material-ui/icons": "4.9.1", "@react-leaflet/core": "1.1.1", "@sentry/react": "^5.30.0", "@sentry/tracing": "^5.30.0", "@testing-library/react": "12.1.4", "@types/uniqid": "^5.3.2", "ansi-html-community": "0.0.8", "axios": "0.26.1", "bootstrap-4-grid": "3.3.0", "chart.js": "3.7.1", "chartjs-adapter-date-fns": "2.0.0", "chartjs-plugin-datalabels": "2.0.0", "classnames": "2.3.1", "core-js": "3.21.1", "cross-env": "7.0.3", "date-fns": "2.28.0", "dotenv": "16.0.0", "es6-promise": "4.2.8", "fast-memoize": "2.5.2", "fs-extra": "10.0.1", "hex-to-css-filter": "4.0.0", "identity-obj-proxy": "3.0.0", "leaflet": "1.7.1", "leaflet-draw": "1.0.4", "leaflet-fullscreen": "^1.0.2", "leaflet-rotatedmarker": "0.2.0", "leaflet-routing-machine": "3.2.12", "leaflet.heat": "0.2.0", "leaflet.markercluster": "1.5.3", "match-sorter": "6.3.1", "namor": "2.0.2", "nouislider": "15.5.1", "prop-types": "15.7.2", "rc-progress": "3.2.4", "rc-slider": "9.7.5", "react": "16.8.6", "react-addons-css-transition-group": "15.6.2", "react-beautiful-dnd": "13.1.0", "react-color": "2.19.3", "react-contextmenu": "2.13.0", "react-custom-scroll": "4.2.0", "react-datepicker": "4.8.0", "react-dev-utils": "10.2.1", "react-dom": "16.8.6", "react-google-maps-loader": "4.3.0", "react-json-view": "1.21.3", "react-leaflet": "^3.2.5", "react-leaflet-draw": "^0.20.4", "react-leaflet-fullscreen": "2.0.2", "react-leaflet-markercluster": "1.1.8", "react-leaflet-rotatedmarker": "0.1.0", "react-loading-skeleton": "^3.2.1", "react-medium-image-zoom": "4.3.0", "react-redux": "7.1.3", "react-router": "5.2.0", "react-router-dom": "5.0.1", "react-scripts": "5.0.0", "react-select": "1.2.1", "react-slider": "1.0.8", "react-table": "7.7.0", "react-table-hoc-fixed-columns": "2.3.0", "react-table-v6": "6.8.6", "react-text-mask": "5.4.3", "react-tooltip": "4.2.21", "react-transition-group": "4.4.1", "react-virtualized-auto-sizer": "1.0.5", "react-window": "1.8.6", "react-yandex-maps": "4.5.0", "reactjs-popup": "1.5.0", "recharts": "1.8.5", "redux": "4.0.4", "redux-thunk": "2.3.0", "resolve": "1.15.0", "save": "2.4.0", "semver": "6.3.0", "sockjs-client": "1.5.2", "text-mask-addons": "3.8.0", "ts-pnp": "1.1.6", "uniqid": "^5.4.0", "use-leaflet": "1.6.1", "warning": "4.0.3" >, "devDependencies": < "@babel/core": "7.18.0", "@babel/plugin-transform-runtime": "7.18.0", "@babel/preset-env": "7.18.0", "@fortawesome/fontawesome-svg-core": "1.2.36", "@redux-devtools/extension": "3.2.2", "@sentry/browser": "5.30.0", "@sentry/webpack-plugin": "1.17.1", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^5.16.5", "@types/leaflet": "^1.9.0", "@types/nouislider": "9.0.7", "@types/react": "^16.14.34", "@types/react-beautiful-dnd": "^13.1.4", "@types/react-custom-scroll": "^4.3.2", "@types/react-datepicker": "^4.8.0", "@types/react-redux": "7.1.23", "@types/react-router": "5.1.18", "@types/react-router-dom": "5.3.3", "@types/react-select": "3.1.2", "@typescript-eslint/eslint-plugin": "2.34.0", "@typescript-eslint/parser": "^2.34.0", "awesome-typescript-loader": "5.2.1", "babel-eslint": "10.1.0", "babel-jest": "24.9.0", "babel-loader": "8.2.2", "babel-plugin-named-asset-import": "0.3.8", "babel-plugin-transform-runtime": "6.23.0", "babel-preset-react-app": "9.1.2", "case-sensitive-paths-webpack-plugin": "2.3.0", "circular-dependency-plugin": "5.2.2", "clean-webpack-plugin": "4.0.0", "compression-webpack-plugin": "^10.0.0", "css-loader": "3.4.2", "dotenv-expand": "5.1.0", "dotenv-webpack": "7.1.0", "error-overlay-webpack-plugin": "0.4.2", "eslint": "6.8.0", "eslint-config-airbnb": "18.2.1", "eslint-config-prettier": "6.15.0", "eslint-config-react-app": "5.2.1", "eslint-loader": "3.0.3", "eslint-plugin-flowtype": "4.6.0", "eslint-plugin-import": "2.25.4", "eslint-plugin-jest": "^27.1.3", "eslint-plugin-jest-dom": "^4.0.2", "eslint-plugin-jsx-a11y": "6.5.1", "eslint-plugin-prettier": "3.4.1", "eslint-plugin-react": "7.29.4", "eslint-plugin-react-hooks": "2.5.1", "eslint-webpack-plugin": "^2.6.0", "file-loader": "4.3.0", "fork-ts-checker-webpack-plugin": "6.5.0", "friendly-errors-webpack-plugin": "1.7.0", "html-webpack-plugin": "5.5.0", "husky": "4.3.8", "jest": "^27.0.6", "jest-environment-jsdom-fourteen": "1.0.1", "jest-resolve": "25.4.0", "jest-transformer-svg": "^1.0.2", "jest-watch-typeahead": "0.4.2", "lint-staged": "10.5.4", "mini-css-extract-plugin": "0.9.0", "optimize-css-assets-webpack-plugin": "5.0.3", "pnp-webpack-plugin": "1.6.4", "prettier": "2.6.0", "prettier-eslint": "9.0.2", "redux-devtools-extension": "2.13.9", "regenerator-runtime": "0.13.9", "resolve-url-loader": "3.1.1", "sass": "1.49.9", "sass-loader": "10.2.1", "sentry-extra-delete-sourcemap-webpack-plugin": "0.0.2", "style-loader": "0.23.1", "terser-webpack-plugin": "2.3.5", "tsconfig-paths-webpack-plugin": "3.5.2", "typescript": "3.9.10", "url-loader": "2.3.0", "webpack": "5.70.0", "webpack-bundle-analyzer": "4.5.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.7.4", "webpack-manifest-plugin": "5.0.0", "webpack-merge": "5.8.0", "workbox-webpack-plugin": "6.5.1" >, "scripts": < "start": "NODE_ENV=development DOT_ENV_FILE=.env.development HOST=0.0.0.0 PORT=3000 webpack serve --config config/webpack.dev.js", "stage": "NODE_ENV=development DOT_ENV_FILE=.env.stage HOST=0.0.0.0 PORT=3000 webpack serve --config config/webpack.dev.js", "stage-sus": "docker-compose -f docker-compose.stage.yml build && docker-compose -f docker-compose.stage.yml push", "build": "NODE_OPTIONS=--max-old-space-size=8192 NODE_ENV=production DOT_ENV_FILE=.env.production HOST=0.0.0.0 PORT=3000 webpack --config config/webpack.prod.js", "test": "react-scripts test --env=jsdom", "jest": "DEBUG_PRINT_LIMIT=1000000 jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage", "prod": "docker-compose build && docker-compose push", "prodnocache": "docker-compose build --no-cache && docker-compose push", "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write \"src/**/*.\"", "stats": "STATS=server npm run build" >, "lint-staged": < "*.(js|jsx|tsx)": [ "npm run lint:write", "git add" ] >, "browserslist": < "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ ">0.2%", "not dead", "not op_mini all" ] > > Пожалуйста, подскажите, как настроить конфигурацию так, чтобы в сборку попадали только необходимые пакеты. Сейчас я использовал опцию externals для удаления typescript из сборки:
externals:
Но это выглядит как костыль.
Cannot uninstall webpack from react-script
I was trying to make a todo-app in react, which is new to me. But after once installed webpack, npm start doesnt working. It gives me:
[email protected] start /home/hanna/Desktop/projects/my-todo-react react-scripts start
- Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
- Delete node_modules in your project folder.
- Remove «webpack» from dependencies and/or devDependencies in the package.json file in your project folder.
- Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:
- If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.
- Check if /home/hanna/node_modules/webpack is outside your project directory. For example, you might have accidentally installed something in your home folder.
- Try running npm ls webpack in your project folder. This will tell you which other package (apart from the expected react-scripts) installed webpack.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above 🙂 We hope you find them helpful!
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! /home/hanna/.npm/_logs/2018-10-02T10_39_06_361Z-debug.log
Добавление и удаление пакетов с помощью npm или Yarn
Одна из лучших особенностей открытого кода и экосистем современных языков программирования заключается в том, что код, который вы собираетесь написать, вероятнее всего, уже написан и готов к использованию.
Для Node.js уже написано множество пакетов, и обычно эти пакеты созданы умными и опытными людьми, которые продумали кучу вещей, о которых менее опытный разработчик мог не подумать.
В этом мануале мы обсудим работу с инструментами npm и yarn. Обе эти команды довольно популярны, вы могли сталкиваться с ними в других статьях по Node.js. Если же вы никогда не слышали о них: npm и yarn – это менеджеры пакетов для Node.js. Оба они используют файл package.json и работают очень похожим образом.
Если у вас уже есть локальная установка Node.js, вероятно, у вас установлен и npm. Если вы предпочитаете использовать yarn, но у вас нет этой команды, вы можете ознакомиться с инструкциями по установке yarn здесь.
В зависимости от вашей системы вы также можете установить эти команды с помощью вашего менеджера пакетов.
Кроме того, некоторые пакеты мы будем устанавливать глобально, а другие – как зависимость проекта. Для работы с этим мануалом можно использовать уже существующий проект или создать простой тестовый проект в каталоге /tmp, например:
$ mkdir /tmp/gator-project
$ cd /tmp/gator-project
$ npm init -y
Эти команды создают файл package.json, в который мы будем добавлять и удалять пакеты.
Добавление зависимости разработки в проект
Не все зависимости одинаковы – некоторые из них требуются только при разработке. Эти зависимости тоже важны, но в производстве они могут замедлить развертывание, поскольку для их установки требуется время.
В качестве примера зависимостей разработки можно привести утилиты тестирования типа mocha или jest. Такие пакеты мы можем установить как зависимости разработки и добавить в раздел devDependencies нашего файла package.json:
# NPM
$ npm install —save-dev mocha
# сокращенная версия
$ npm i -D mocha
# Yarn
$ yarn add —dev mocha
# сокращенная версия
$ yarn add -D mocha
Добавление зависимостей производства в проект
Некоторые зависимости критически важны для приложения и всегда должны устанавливаться независимо от среды – и в разработке, и в производстве без них никуда. Это зависимости производства, обычно к ним относятся такие пакеты, как express или react.
Добавить зависимость производства в проект так же просто, как и зависимости разработки, но вместо devDependencies их следует помещать в раздел dependencies:
# NPM
$ npm install —save express
# сокращенная версия
$ npm i -P express
# Yarn
$ yarn add express
Глобальная установка зависимостей
Иногда бывает необходимо установить пакет вне текущего проекта, чтобы он был доступен для всех проектов в текущей системе. Такие пакеты устанавливаются глобально. Чаще всего они включают утилиты, которые необходимо запускать вместе с другими утилитами командной строки:
# NPM
$ npm install —global json
# сокращенная версия
$ npm i -g json
# Yarn
$ yarn global add json
Удаление зависимости из проекта
В жизни каждого проекта наступает момент, когда зависимость, которая когда-то казалась жизненно необходимой, больше не выполняет никакой функции. В таком случае всегда лучше удалить код (при условии, что вы все хорошо протестировали и уверены, что после удаления ничего не сломается).
Чтобы удалить из проекта зависимость разработки или производства, используйте:
# NPM
$ npm uninstall jest
# Shorthand version
$ npm r jest
# Yarn
$ yarn remove jest
Это удалит пакеты из node_modules, а также уберет зависимость из package.json. Некоторые версии этих команд также показывают обновления файла.
Глобальное удаление пакета
Удаление глобально установленного пакета выполняется так же, как удаление пакета из проекта, только вы должны передать аргумент global (его же мы использовали при глобальной установке).
# NPM
$ npm uninstall —global json
# сокращенная версия
$ npm r -g json
# Yarn
$ yarn global remove json
Как удалить webpack
dir.by Сайт dream-land.by
перенесен на dir.by —>
Поиск
«npm uninstall -g имя_пакета» (глобальное удаление пакета) | Node.js
Посмотрели 5428 раз(а)
«npm uninstall -g имя_пакета» (глобальное удаление пакета) | Node.js
последнее обновление: 5 августа 2020
Для того чтобы удалить пакет глобально выполняем в командной строке:
Command Prompt (Win Console)
npm uninstall -g имя_пакета
Пример (удаляем глобальный пакет npx)
Command Prompt (Win Console)
npm uninstall -g npx
На заметку! После удаления пакета вы можете почистить кэш:
npm cache clean —force
← Предыдущая тема
«npm install -g имя_пакета» (глобальная установка пакета) | Node.js
Следующая тема →
Выполняем в командной строке «npm run EvgenConvertCSS» | Файл package.json вот такой: «scripts»: | Node.js
Ваши Отзывы . комментарии.