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'
],

Babel 7无法解析node_modules相对路径

1 个答案: