当我尝试使用webpack和babel版本7编译javascript时，找不到模块：错误：无法解析'core-js / stable'

编程问答 2022-08-15

问题描述

我正在尝试解决IE无法运行我的JavaScript的问题，因为我正在使用array.find和其他ECMAScript 2015语言功能。我知道有很多解决方法，但是由于我已经将webpack和babel用于我的React组件，所以我也想将babel用于我的其他javascript文件。

我的package.json看起来像这样：

{
  "name": "[projectname]","version": "1.0.0","private": "true","license": "MIT","scripts": {
    "build": "rimraf wwwroot/dist && webpack"
  },"dependencies": {
    "@babel/runtime": "^7.11.2","emotion": "^9.2.12","emotion-server": "^9.2.12","jquery": "^3.5.1","react": "^16.8.2","react-dom": "^16.8.2","react-emotion": "^9.2.12","react-helmet": "^6.0.0","react-jss": "^8.6.1","react-router-dom": "^5.0.0","react-select": "^3.0.4","reactstrap": "^8.0.0","styled-components": "^4.0.0"
  },"devDependencies": {
    "@babel/core": "7.8.7","@babel/plugin-proposal-class-properties": "7.8.3","@babel/plugin-proposal-object-rest-spread": "7.8.3","@babel/plugin-Syntax-dynamic-import": "7.8.3","@babel/plugin-transform-runtime": "^7.11.0","@babel/preset-env": "7.8.7","@babel/preset-react": "7.8.3","@babel/runtime-corejs3": "^7.11.2","babel-loader": "8.0.6","babel-runtime": "6.26.0","rimraf": "3.0.2","webpack": "4.43.0","webpack-cli": "3.3.12","webpack-manifest-plugin": "2.2.0"
  }
}

我的.babelrc是这样的：

{
    "presets": ["@babel/preset-react","@babel/preset-env"],"plugins": [
        "@babel/proposal-object-rest-spread","@babel/plugin-Syntax-dynamic-import","@babel/proposal-class-properties","@babel/plugin-transform-runtime"
    ]
}

我的webpack.fonig.js像这样：

const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    watch: true,entry: {
        main: './ClientApp/react/components/expose-components.js',site: "./ClientApp/js/site.js",design: "./ClientApp/js/design/index.js",},output: {
        filename: '[name].[contenthash:8].js',globalObject: 'this',path: path.resolve(__dirname,'wwwroot/dist'),publicPath: '/dist/'
    },mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',optimization: {
        runtimeChunk: {
            name: 'runtime',// necessary when using multiple entrypoints on the same page
        },splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,name: 'vendor',chunks: 'all',module: {
        rules: [
            {
                test: /\.(js|jsx)?$/,exclude: /node_modules/,loader: 'babel-loader',],plugins: [
        new ManifestPlugin({
            fileName: 'asset-manifest.json',generate: (seed,files) => {
                const manifestFiles = files.reduce((manifest,file) => {
                    manifest[file.name] = file.path;
                    return manifest;
                },seed);

                const entrypointFiles = files.filter(x => x.isInitial && !x.name.endsWith('.map')).map(x => x.path);

                return {
                    files: manifestFiles,entrypoints: entrypointFiles,};
            },}),]
};

此javascript文件design / index.js中发生错误：

import "core-js/stable";
//import "regenerator-runtime/runtime";
import "../Shared/common-entity-grid";

console.log("hello from design/index.js")
...

最后，当我运行“ npm run build”时，错误是：

./ClientApp/js/design/index.js中的

错误 找不到模块：错误：无法解析“ [项目路径] \ ClientApp \ js \ design”中的“ core-js / stable” @ ./ClientApp/js/design/index.js 1：0-24

我不知道应该如何正确地处理有问题的import语句，或者应该如何解决该路径，因此，我不确定如何解决此问题，而是基于所有内容（例如{{ 3}}和here）我已经在线阅读了有关babel 7+的信息，这应该是为我要使用的语言功能包括polyfill的正确方法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-polyfillbabeljsecmascript-6javascriptwebpackwebpackwebpack