npm-package.json覆盖主字段 [英] npm - package.json override main field

问题描述

我在项目中使用了一些npm软件包.其中两个具有错误的main字段.有可能覆盖它们吗?

I use some npm packages in my project. Two of them have the wrong main-field. Is it possible to override them?

我使用webpack.我在此处找到了解决方案.

I use webpack. I found a solution here.

这适用于主字段，但我还需要来自同一软件包的css文件.我在index.scss文件中用~package/css/style.css引用它.通过上述解决方案，它可以使用path/to/main.js/css/style.css(使用main.js)而不是path/to/css/style.css(不使用main.js)来解析路径.

This works for the main field but I also need a css-file from the same package. I refer it with ~package/css/style.css in my index.scss file. With the solution above it resolves the path with path/to/main.js/css/style.css (with main.js) instead of path/to/css/style.css (without main.js).

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

I could refer it directly ../node_modules/path/to/css/style.css but I think thats ugly.

那么还有使用webpack或npm替代该主要字段的其他解决方案吗?

So is there an other solution with webpack or npm to override this main field?

-编辑-

我使用bootstrap-treeview作为包装.我像这样在index.scss中引用它 @import '~bootstrap-treeview/src/css/bootstrap-treeview.css';.可行.

I use bootstrap-treeview as package. I refer it in index.scss like so @import '~bootstrap-treeview/src/css/bootstrap-treeview.css';. This works.

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

When I add 'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js') as alias in webpack import 'bootstrap-treeview'; works but the css not (as describes above).

-编辑2-

webpack.conf.js:

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参见上面.

index.scss see above.

bootstrap-treeview别名错误:

Error with bootstrap-treeview alias:

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 ...

推荐答案

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

The problem is that your alias points directly to the JS file, instead of pointing to the common ancestor of both the JS and the CSS. It's nice and convenient to be able to import Treeview from "bootstrap-treeview" but it leads to the problem you're describing.

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

Instead, you could specify a higher level alias:

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

并以import Treeview from "boostrap-treeview/js/bootstrap-treeview.js"的形式获得JS.这使您可以将CSS作为require("bootstrap-treeview/css/bootstrap-treeview.css")获得.

and get the JS as import Treeview from "boostrap-treeview/js/bootstrap-treeview.js". This allows you to get the CSS as require("bootstrap-treeview/css/bootstrap-treeview.css").

您也许可以变得聪明一点，并告诉Webpack在~/css/中查找CSS文件，在~/js/中查找JS文件，但这将为(IMHO)带来一点收获而增加更多的魔力.

You might be able to get clever about it and tell Webpack to look for CSS files in ~/css/ and JS files in ~/js/ but that would be adding more magic for (IMHO) little gain.

这篇关于npm-package.json覆盖主字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！