npm 包 common-config 使用教程

在前端开发中，我们经常需要在不同的项目或团队之间共享一些常见的配置项，例如 ESLint、Webpack 和 Babel 等。为了解决这个问题，可以使用一个名为 common-config 的 npm 包来管理这些常见配置项。

安装和使用

首先，你需要在你的项目中安装 common-config 包：

npm install --save-dev common-config

然后，在你的项目根目录下创建一个 .eslintrc.js 的文件，并添加以下内容：

module.exports = {
  extends: 'common-config/eslint',
};

这会使用 common-config 中预定义的 ESLint 配置。

类似的，你可以创建一个 webpack.config.js 文件，然后添加以下内容：

const { merge } = require('webpack-merge');
const commonConfig = require('common-config/webpack.common');

module.exports = merge(commonConfig, {
  // 在这里添加你的特定配置项
});

这将使用 common-config 中预定义的 Webpack 配置，并与你的特定配置进行合并。

最后，你还可以在你的 Babel 配置文件（.babelrc）中使用 common-config，如下所示：

{
  "extends": "common-config/babel"
}

这将使用 common-config 中预定义的 Babel 配置。

自定义配置

当然，你也可以通过继承 common-config 中的配置，并添加自己的规则和插件来自定义配置项。例如，假设你想要向 ESLint 配置中添加一个 no-debugger 规则，可以按照以下步骤操作：

首先，在你的项目中安装 eslint-config-common 包：

npm install --save-dev eslint-config-common

然后，在你的 .eslintrc.js 文件中添加 common-config/eslint 配置的继承，如下所示：

module.exports = {
  extends: ['common-config/eslint'],
  rules: {
    'no-debugger': 'error', // 添加 no-debugger 规则
  },
};

现在，你已经成功地在 common-config 中添加了一个新的规则。

总结

通过使用 common-config，我们可以方便地管理常见的配置项，避免重复劳动并增加代码的可维护性。当然，我们也可以通过继承 common-config 来自定义配置。但是，我们需要记住，在添加新的配置时，必须谨慎评估其影响，并确保不会对其他开发人员造成困扰。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50074