npm - package.json 覆盖主字段答案

【问题标题】：npm - package.json override main fieldnpm - package.json 覆盖主字段
【发布时间】：2016-12-01 08:06:50
【问题描述】：

我在我的项目中使用了一些 npm 包。其中两个有错误的main-field。是否可以覆盖它们？

我使用 webpack。我找到了解决方案here。

这适用于主要领域，但我还需要来自同一个包的 css 文件。我在我的index.scss 文件中使用~package/css/style.css 引用它。使用上面的解决方案，它使用path/to/main.js/css/style.css（带main.js）而不是path/to/css/style.css（不带main.js）解析路径。

我可以直接引用它../node_modules/path/to/css/style.css 但我认为那很难看。

那么有没有其他解决方案使用 webpack 或 npm 来覆盖这个主要字段？

-- 编辑--

我使用bootstrap-treeview 作为包。我像这样在index.scss 中提及它 @import '~bootstrap-treeview/src/css/bootstrap-treeview.css';。这行得通。

当我在 webpack 中添加 'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js') 作为别名时，import 'bootstrap-treeview'; 有效，但 css 无效（如上所述）。

-- 编辑 2--

webpack.conf.js：

resolve: {
  extensions: ['', '.js'],
  modulesDirectories: ['node_modules'],
  alias: {
    // bootstrap-treeview alias
    'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js')
  }
},
module: {
  loaders: [
    {
      test: /\.css$/,
      loaders: [
        'style-loader',
        'css-loader?sourceMap',
        'postcss-loader'
      ]
    },
    {
      test: /\.(scss|sass)$/,
      loader: 'style-loader!css-loader?sourceMap!postcss-loader!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true
    }
  ]
}

index.scss 见上文。

bootstrap-treeview 别名错误：

Module not found: Error: Cannot resolve 'file' or 'directory' /home/ekf/develop/generator-angular-webpack/node_modules/bootstrap-treeview/src/js/bootstrap-treeview.js/src/css/bootstrap-treeview.css in ...

没有别名的错误：

Module not found: Error: Cannot resolve module 'bootstrap-treeview' in ...

【问题讨论】：

你确定你正在使用 Webpack 加载 .scss 文件吗？你能把代码贴在你引用index.scss和style.css的地方吗？
使用~package/css/style.css 它可以工作。一旦我将“别名”添加到 webpack 解析字段，它就会按照描述解析它。
在bower.json 中有一个overrides-字段正是为了这个目的。 package.json有类似的吗？

标签： npm webpack package.json

【解决方案1】：

以防万一

webpack scss 加载器配置

module: {
    loaders: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: "style-loader!css-loader"
        },
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            loader: "style-loader!css-loader!sass-loader"
        }
    ]
}

【讨论】：

我应该使用哪个加载器从node_modules 加载css 和scss？它返回Unexpected token 错误。
"style-loader", "css-loader, "sass-loader" npm 包
我的意思是当我排除 node_modules 时，其中的 css 文件不会加载“style-loader”、“css-loader”、“sass-loader”。它返回 Unexpected token 因为有没有为“node_modules 中的 css”定义加载器。

【解决方案2】：

问题是您的别名直接指向 JS 文件，而不是指向 JS 和 CSS 的共同祖先。能够import Treeview from "bootstrap-treeview" 很方便，但它会导致您描述的问题。

相反，您可以指定更高级别的别名：

resolve: {
  alias: {
    // bootstrap-treeview alias
    'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src')
  }
},

并将 JS 设为 import Treeview from "boostrap-treeview/js/bootstrap-treeview.js"。这使您可以将 CSS 设为 require("bootstrap-treeview/css/bootstrap-treeview.css")。

你也许可以聪明一点，告诉 Webpack 在 ~/css/ 中查找 CSS 文件，在 ~/js/ 中查找 JS 文件，但这会为（恕我直言）一点收获增加更多魔力。

【讨论】：