React组件Webpack打包后移除node_modules引发构建失败求助

Let's break down why this is happening and how to fix it step by step:

Root Causes #

1. Misclassified Dependencies: Your package.json has Babel tools and plugins (like babel-plugin-transform-object-rest-spread) listed in dependencies instead of devDependencies. These are build-time tools, not runtime dependencies—your component shouldn't require them to run in another project. When you remove the component's node_modules, the host project can't find these plugins anymore.
2. Incomplete Transpilation: It's likely your Webpack build isn't fully converting ES6+ features (like object rest/spread syntax) to ES5. This forces the host project's Babel setup to try processing your component code, which fails if the host doesn't have the required plugins.

Step 1: Fix Your Package.json Dependencies #

Move all build tools to devDependencies—only keep runtime dependencies (like react) in dependencies:

{
  "name": "react-component",
  "version": "0.0.1",
  "description": "Put a description here",
  "main": "build/index.js",
  "dependencies": {
    "react": "^15.5.4"
  },
  "devDependencies": {
    "webpack": "^2.6.1",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.5.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "author": {
    "name": "Your name",
    "email": "your email"
  }
}

Step 2: Configure Webpack for Full Transpilation & Compatibility #

Make sure your webpack.config.js is set up to transpile all component code to ES5, and make the component compatible with different module systems (CommonJS, AMD, etc.):

module.exports = {
  entry: './src/index.js', // Update this to your component's actual entry file
  output: {
    path: __dirname + '/build',
    filename: 'index.js',
    libraryTarget: 'umd', // Makes your component usable in any module system
    library: 'ReactComponent' // Name of your component's global variable (optional)
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'],
            plugins: ['transform-react-jsx', 'transform-object-rest-spread']
          }
        }
      }
    ]
  },
  externals: {
    // Exclude React from your bundle—let the host project provide it
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    }
  }
};

Key points here:

• libraryTarget: 'umd' ensures your component works in any project, regardless of how they import modules.
• externals prevents React from being bundled with your component (avoids duplicate React instances in the host project).
• Explicitly listing Babel plugins in the loader options guarantees that object rest/spread syntax gets transpiled to ES5 during your build.

Step 3: Rebuild Your Component #

Run these commands to update dependencies and generate a new, properly transpiled bundle:

npm install
npm run build

Step 4: Test in the Host Project #

Now, when you use your component in another React project (without its node_modules), it should work without Babel plugin errors. The host project only needs to have react installed (which it already does, since it's a React project).

内容的提问来源于stack exchange，提问作者thinuwan