2

我正在尝试导入我在本地创建并链接/安装到另一个通过 webpack 构建和运行的模块的模块。

我使用了多种方法将自定义模块集成到其他模块中：

  1. npm link自定义模块创建一个符号链接，该链接出现在node_modules另一个模块的目录中
  2. npm install <local_absolute_path>安装它的自定义模块
  3. 使用wml（https://github.com/wix/wml）将自定义模块中更改的文件复制到node_modules
  4. 将自定义模块发布到npm然后安装到另一个模块中

所有这些方法仍然导致 webpack 和 Flow 显示Cannot resolve错误

NPM 版本：6.9.1-next.0 节点版本：8.8.1

这是package.json自定义模块的文件：

{
  "name": "custom_module_name",
  "version": "2.3.0",
  "repository": {
    "type": "git",
    "url": "-----"
  },
  "license": "UNLICENSED",
  "engines": {
    "node": ">=10.10.0",
    "npm": ">=6.4.1"
  },
  "ava": {
    "files": [
      ".test/**/*.js"
    ],
    "require": [
      "./test/helpers/config.js",
      "./test/helpers/utils.js"
    ],
    "babel": {
      "testOptions": {
        "babelrc": false
      }
    },
    "sources": [
      ".dist/**/*"
    ],
    "serial": true,
    "verbose": true,
    "failFast": false,
    "color": true,
    "concurrency": 1,
    "failWithoutAssertions": false,
    "tap": false,
    "timeout": "180s"
  },
  "nightmare": {
    "doc": true,
    "show": true,
    "openDevTools": {
      "mode": "detach"
    },
    "executionTimeout": 10000,
    "waitTimeout": 120000,
    "webPreferences": {
      "partition": "nopersist"
    },
    "switches": {
      "ignore-certificate-errors": true
    },
    "show_console_logging": false
  },
  "glslify": {
    "transform": [
      "glslify-import"
    ]
  }
}

这是webpack.common.js尝试导入自定义模块的其他模块的文件：

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const FlowWebpackPlugin = require('flow-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['babel-polyfill', 'react', 'react-dom'],
    annotationService: glob.sync('./ClientScripts/---/*.js'),
    sass: './sass/main.scss'
  },
  output: {
    path: path.join(__dirname, 'reactDist'),
    filename: 'js/[name].js',
    publicPath: '/---/',
    sourceMapFilename: 'map/[name].map'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  resolve: {
    alias: {
      Interfaces: path.resolve(__dirname, 'ClientScripts/Interfaces/'),
      "custom_module_name": path.resolve(__dirname, 'node_modules/custom_module_name/')
    },
    symlinks: false
  },
  target: 'web',
  node: {
    fs: "empty"
  },
  externals: {
    'winston': 'require("winston")' // https://stackoverflow.com/questions/37840566/how-do-i-get-winston-to-work-with-webpack/37841103
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: [/node_modules/] },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: [/node_modules/] },
      { test: /\.env$/, loader: "file-loader?name=index.[ext]", exclude: [/node_modules/] },
      {
        test: /\.scss$|\.css$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
          use: [{
            loader: "css-loader",
            options: {
              minimize: true
            }
          },'sass-loader']
        })
      },
      { test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader?name=img/[name].[ext]?',
        options: {
          name (file) {
            if (process.env.environment === 'prod') {
              return '[path][name].[hash].[ext]'
            }

            return '[path][name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'css/timeline.[md5:contenthash:hex:20].css', disable: false, allChunks: true }),
    new FlowWebpackPlugin()
  ]
}

这是我的.flowconfig

[ignore]
.*/node_modules/flow-webpack-plugin/.*
.*/node_modules/custom-module-name/.*
.*/node_modules/custom-module-name/**/test/.*
.*/node_modules/.*\.json$
.*/node_modules/\.staging/.*

[libs]
flow-typed

[options]
module.name_mapper='^Interfaces\/\(.*\)$' -> '<PROJECT_ROOT>/ClientScripts/Interfaces/\1'
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.svg
module.file_ext=.json

我经常收到的两个错误是：

ERROR in ./ClientScripts/-/DashboardGrid.jsx
Module not found: Error: Can't resolve 'custom_module_name' in '-/ClientScripts/-/components'

我相信来自 webpack

ERROR in Flow validation
Error ------------------------------------------ ClientScripts/-/DashboardGrid.jsx:11:22

Cannot resolve module custom_module_name.

      8| const ReactGridLayout = WidthProvider(RGL);
      9|
     10| // AKDV
     11| import { Test } from 'custom_module_name';

来自Flow

我假设问题源于自定义模块设置本身......知道它可能有什么问题吗？

4

0 回答 0