Babel 7 无法解析 node_modules 相对路径

Question

我从 Babel 6 升级了我的代码以使用 Babel 7.0（已经在 webpack 4 上）。我还将我的所有 JSX 文件重命名为 TSX - 没有代码更改。这会导致很多编译错误，节点模块中的相对路径没有被解析：

ERROR in ./node_modules/moment/locale/eo.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/eo.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

ERROR in ./node_modules/moment/locale/sq.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/sq.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

ERROR in ./node_modules/moment/locale/ss.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/ss.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

ERROR in ./node_modules/moment/locale/sv.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/sv.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

我们使用的几乎所有软件包都抛出了类似的错误，包括“react-dom”、“react-intl”等等。

添加我的 webpack.config 文件：

module.exports = {
  
  context: __dirname,
  
  mode: 'production',
  
  entry: {
    app: [ './src/App.tsx' ],
  },

  watchOptions: {
    ignored: /node_modules/
  },

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
   
  devServer: {
    contentBase: path.join(__dirname, 'assets'),
    compress: true,
    port: 1309,
    hot: true,
    https: false,
    noInfo: false,
    historyApiFallback: true
  },
  
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },

  module: {
    rules: [
      {
        test: /\.(tsx?|es6\.jsx?)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        loader: 'babel-loader?cacheDirectory'
      },
      {
        test: /\.css$/,
        use: [ 
          {
            loader: 'style-loader'
          }
        ]
      },
      {
        test: /\.(gif|png|jpg|svg|eot|woff|woff2|ttf|mp4|cur|ico)$/,
        loader: 'file-loader'
      }
    ]
  },

  resolve: {
    // needed to not use relative paths in imports
    modules: [
      path.resolve('./src'),
      path.resolve('./node_modules')
    ],

    // extensions that are handled by webpack
    extensions: [
      '.ts', '.tsx', '*.js', '*.jsx', '.json'
    ],
    
    alias: {
      src: './src'
      // external libraries 
    }
  },

  output: {
    path: __dirname + '/dist',
    publicPath: '',
    filename: '[name].js'
  },
  
  devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',

  plugins: [

    new HtmlWebpackPlugin({ title: 'Test App', template: 'src/index.ejs', inject: 'body' }),
    new webpack.ProvidePlugin({"React": "react",}),
    new webpack.HotModuleReplacementPlugin(),
  ]

};

我的 .babelrc 文件是：

{
"presets":[
    "@babel/react",
    "@babel/typescript"
],
"plugins":[
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-modules-commonjs"
] }

Answer 1

extensions: [
  '.ts', '.tsx', '*.js', '*.jsx', '.json'
],

在扩展之前有额外的* 字符，因此Webpack 将无法找到该文件，因为没有../moment*.js 文件。你的extensions 应该是

extensions: [
  '.ts', '.tsx', '.js', '.jsx', '.json'
],