运行webpack观察程序时预设错误

时间:2018-06-16 15:01:01

标签: javascript webpack automation babeljs

我遇到webpack --watch的问题。整个配置以前工作,但我不得不再次安装我的开发环境,并在终端中运行webpack --watch时开始收到错误:

ERROR in ./src/modules/page-builder/page.builder.js
Module build failed: ReferenceError: [BABEL] .../src/modules/app/app.js: Unknown option: .../src/bundle/ui-dev/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: ".../src/bundle/ui-dev/node_modules/react/index.js")

我的.babelrc如下所示:

{
    "presets": [
        "react",
        [
            "env",
            {
                "targets": {
                    "browsers": ["last 1 version"]
                }
            }
        ]
    ],
    "plugins": ["transform-react-remove-prop-types", "transform-object-rest-spread"]
}

我的webpack.config.js如下:

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {
        App: './src/modules/app/app.js',
    },
    output: {
        filename: '[name].module.js',
        path: path.resolve(__dirname, '../Resources/public/js/modules'),
        library: ['modules', '[name]'],
        libraryTarget: 'umd',
        libraryExport: 'default',
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react',
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom',
        },
        jquery: {
            root: '$',
            commonjs2: 'jquery',
            commonjs: 'jquery',
            amd: 'jquery',
        },
    },
    plugins: [
        new CleanWebpackPlugin(['../Resources/public/js/modules']),
        new UglifyJSPlugin({
            sourceMap: true,
            uglifyOptions: { ecma: 6 },
        }),
    ],
};

我的package.json

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "flatpickr": "^4.2.3",
        "jquery": "^3.3.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-flatpickr": "^3.6.3"
    },
    "scripts": {
        "watch": "npm-watch"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-eslint": "^8.2.1",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
        "clean-webpack-plugin": "^0.1.17",
        "eslint-config-prettier": "^2.9.0",
        "eslint-plugin-prettier": "^2.6.0",
        "eslint-plugin-react": "^7.7.0",
        "html-to-react": "^1.3.2",
        "npm-watch": "^0.3.0",
        "prettier": "^1.12.1",
        "uglifyjs-webpack-plugin": "^1.1.6",
        "webpack": "3.10.0"
    },
    "watch": {
        "build": "src/**/*.js"
    }
}

我不知道这个问题的根源是什么。欢迎任何建议。

0 个答案:

没有答案