使用npm link

时间:2018-01-23 20:25:08

标签: javascript npm eslint npm-link

我有一个多包项目,我有一个依赖于TypeScript库的JavaScript包。最初我安装了Sinopia,并在每次更改库时重新安装库。然后我看到npm link并认为开发会更容易。不幸的是,当我链接库(使用npm link ../typescript-package)并构建时,它会出错:

ERROR in ../typescript-package/dist/index.js
Module build failed: Error: No ESLint configuration found.

由于它们是单独的包,我不太确定为什么Webpack试图将eslint应用于此包。这是我的webpack.common.js文件(使用merge和dev vs prod configs应该无关紧要):

// webpack.common.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const babelOptions = {
  presets: ['react', 'es2015', 'stage-0'],
  sourceMaps: true,
  retainLines: true,
};

module.exports = {
  entry: {
    solver: './source/index.jsx',
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
    publicPath: '/dist/',
  },
  resolve: {
    modules: ['source', 'node_modules/'],
    extensions: ['.js', '.jsx', '/index.jsx', '.json', '.ts', '/index.ts', '.scss', '/index.scss', '.css'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: babelOptions,
          },
          {
            loader: 'eslint-loader',

            options: {
              emitWarnings: true,
            },
          },
        ],
        exclude: /node_modules/,
      }, {
        test: /\.js$/,
        loader: 'source-map-loader',
        enforce: 'pre',
        exclude: /node_modules/,
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              minimize: true,
              localIdentName: '[local]_[hash:base64:5]',
            },
          }, {
            loader: 'sass-loader',
            options: {
              includePaths: ['source/design'],
            },
          }],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
  ],
  node: {
    global: true,
  },
};

如果需要,我还可以提供其他配置或package.json文件。

2 个答案:

答案 0 :(得分:2)

方法1-Webpack要求

根据webpack文档:https://webpack.js.org/configuration/module/#rule-conditions

小心!资源是文件的解析路径,这意味着符号链接资源是实际路径,而不是符号链接位置。当使用符号链接软件包(如npm链接)的工具时,要记住这一点,通常情况(如/ node_modules /)可能会无意间丢失符号链接文件。请注意,您可以通过resolve.symlinks关闭符号链接解析(以便将资源解析到符号链接路径)。

因此,您可以根据其禁用符号链接:https://webpack.js.org/configuration/resolve/#resolvesymlinks

方法2-花式黑客

但是也许您的项目需要符号链接。因此,我使用这样的eslint规则:

{
  test: /\.js$/,
  enforce: 'pre',
  use: 'eslint-loader',
  include: path.resolve(__dirname), // <-- This tell to eslint to look only in your project folder
  exclude: /node_modules/
}

显然还有您自己的该加载器配置。

答案 1 :(得分:0)

我也在处理这个问题。我不完全确定为什么ESLint在外部包中寻找配置文件(我希望本地rc文件足够)但是npm link创建的符号链接从{{1}中取出外部包},否则将被装载程序排除。

我提出的解决方法是将包复制到./node_modules/。然后通过Webpack配置中的./node_modules/规则过滤掉它。

我知道这是非常不优雅的,并且不应该“足够好”,但我花了一些时间试图解决这个问题,这是我能想到的最好的。在出现更好的事情之前,你至少可以解决更紧迫的问题。