webpack - Babel 6 到 7 升级

Question

我已经使用babel-upgrade来升级我们的 babel/webpack 设置，但是我收到了这个错误。

ModuleNotFoundError: Module not found: Error: Can't resolve 'regenerator-runtime/runtime' in 'C:\Users\...\node_modules\@babel\polyfill\lib'

这是我们的 package.json

{
    "dependencies": {
        "@babel/polyfill": "^7.0.0",
        "@babel/register": "^7.0.0"
    },
    "devDependencies": {
        "@babel/core": "^7.1.6",
        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
        "@babel/preset-env": "^7.1.6",
        "@babel/preset-react": "^7.0.0",
        "@types/webpack": "^4.4.0",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^23.6.0",
        "babel-loader": "^8.0.4",
        "expose-loader": "^0.7.5",
        "po-loader": "^0.4.1",
        "po2json": "^0.4.5",
        "ts-loader": "^5.0.0",
        "typescript": "^3.1.4",
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.3"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-object-rest-spread"
        ]
    }
}

Webpack 配置

'use strict';
/// <reference types="node" />
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');

/** @type {webpack.Configuration} */
const config = {
    bail: true,
    mode: 'development',
    target: 'web',

    entry: {
        ravenjs: 'raven-js',
        vendor: ['@babel/polyfill', 'whatwg-fetch'],
        upload: ['upload/UploadComponent'],
        video: 'video/player.ts',
    },

    resolve: {
        modules: [javaScriptSourceDir, typeScriptSourceDir, nodeModules],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', 'po'],
    },

    externals: {
        'jquery': 'jquery', // require("jquery") is compiled as runtime require("jquery")
        'raven': 'bundle/ravenjs',
    },

    output: {
        path: bundleDir,
        filename: '[name].js',
        sourceMapFilename: '[file].map',
        chunkFilename: 'chunk[id].js',
        publicPath: '',
        libraryTarget: 'amd'
    },

    module: {
        rules: [
            {
                // use Babel for source files
                test: /\.js(x?)$/,
                include: javaScriptSourceDir,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                    },
                }],
            },
            {
                // compile and transpile .ts files
                test: /\.ts$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: TSConfigFile,
                            //useBabel: true,
                            //useCache: true,
                        }
                    },
                ],
            },
            {
                // *.po -> *.json
                test: /\.po$/,
                include: javaScriptSourceDir,
                use: [{
                    loader: 'po-loader',
                    options: {
                        format: 'jed1.x',
                    },
                }],
                type: 'json',
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({ React: 'react' }),
    ],
};
module.exports = config;

标签： webpackbabeljsbabel-loader