开源项目 `obsolete-webpack-plugin` 使用教程

开源项目 obsolete-webpack-plugin 使用教程

obsolete-webpack-plugin🌈 A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.项目地址:https://gitcode.com/gh_mirrors/ob/obsolete-webpack-plugin

1. 项目的目录结构及介绍

obsolete-webpack-plugin/
├── README.md
├── package.json
├── lib/
│   ├── index.js
│   └── utils.js
├── examples/
│   ├── basic/
│   │   ├── webpack.config.js
│   │   └── src/
│   │       └── index.js
│   └── advanced/
│       ├── webpack.config.js
│       └── src/
│           └── index.js
└── test/
    └── index.test.js

• README.md: 项目介绍和使用说明。
• package.json: 项目的依赖和脚本配置。
• lib/: 包含项目的主要代码文件。
  • index.js: 插件的主入口文件。
  • utils.js: 工具函数文件。
• examples/: 示例配置和代码。
  • basic/: 基础示例。
  • advanced/: 高级示例。
• test/: 测试文件。

2. 项目的启动文件介绍

项目的启动文件位于 lib/index.js，这是插件的主入口文件。它导出了一个类 ObsoleteWebpackPlugin，用于在 Webpack 构建过程中检测浏览器兼容性并提示用户升级浏览器。

// lib/index.js
const ObsoleteWebpackPlugin = require('./ObsoleteWebpackPlugin');

module.exports = ObsoleteWebpackPlugin;

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和示例中的 webpack.config.js。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "obsolete-webpack-plugin",
  "version": "1.0.0",
  "description": "A Webpack plugin to detect browser compatibility and prompt users to upgrade",
  "main": "lib/index.js",
  "scripts": {
    "test": "jest",
    "build": "webpack"
  },
  "dependencies": {
    "webpack": "^4.0.0"
  },
  "devDependencies": {
    "jest": "^26.0.0"
  }
}

webpack.config.js

示例中的 webpack.config.js 文件展示了如何配置和使用 obsolete-webpack-plugin。

// examples/basic/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new ObsoleteWebpackPlugin({
      browsers: ['Chrome >= 30'],
      promptOnNonTargetBrowser: true
    })
  ]
};

以上是 obsolete-webpack-plugin 项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。

obsolete-webpack-plugin🌈 A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.项目地址:https://gitcode.com/gh_mirrors/ob/obsolete-webpack-plugin