如何在 ejected Create-React-App 中配置 @salesforce/design-system-react

Hey there! Let's walk through getting this set up step by step—ejected CRA apps can feel a bit overwhelming with all the exposed config, but we'll break it down nice and simple.

First: Clarify the Config Files You're Looking For #

You mentioned needing a .babelrc and Webpack v1 file, so let's clear up a couple of key points first:

• Ejected CRA apps don't use a standalone .babelrc by default—instead, Babel config is usually in a babel.config.js file or embedded directly in the Webpack config. That said, you can create a .babelrc manually if you prefer, and the project will pick it up automatically.
• Webpack v1 is pretty outdated, and your ejected CRA is almost certainly using Webpack v4 or v5. The docs mentioning v1 are likely referring to older examples, so we'll focus on adapting those guidelines to your current Webpack version instead of hunting down a v1 config file.

Step 1: Install Required Dependencies #

First, install the Salesforce Design System React package and any missing Babel tools you'll need:

npm install @salesforce/design-system-react --save
npm install @babel/plugin-proposal-class-properties @babel/preset-env --save-dev

Step 2: Set Up Your Babel Config #

If you want to use a .babelrc file (like the docs mention), create one in your project root with this basic setup (aligned with Salesforce's requirements):

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

If you'd rather stick with CRA's existing babel.config.js, just add those plugins to its plugins array instead.

Step 3: Update Your Webpack Config #

Your ejected CRA's Webpack config lives in config/webpack.config.js. Here's what you need to adjust:

• Ensure Babel loads the required plugins: Find the section where babel-loader is configured (look for test: /\.(js|mjs|jsx|ts|tsx)$/). Add the Salesforce-required plugins to the loader's options:

  options: {
    plugins: ['@babel/plugin-proposal-class-properties'],
    // Keep all your existing options like cacheDirectory, presets, etc.
  }
  

• Handle Salesforce's Static Assets: The Salesforce Design System includes CSS and font files. CRA's default Webpack config already handles CSS, but you'll need to import the core CSS in your app. Add this line to your src/index.js file:

  import '@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css';
  

Step 4: Test a Component #

To make sure everything's working, try adding a simple Salesforce component to your app. For example, in src/App.js:

import Button from '@salesforce/design-system-react/components/button';

function App() {
  return (
    <div className="App">
      <Button label="Test Salesforce Button" variant="brand" />
    </div>
  );
}

export default App;

Run your app with npm start—you should see the styled Salesforce button render correctly.

A Quick Note About "Webpack v1 Files" #

If you're referencing older docs that mention Webpack v1, don't waste time hunting those down. Webpack v1 syntax is incompatible with the version in your ejected CRA. Instead, map the v1 config concepts (like loaders and plugins) to their modern equivalents in your existing webpack.config.js. For example:

• Webpack v1's loaders array is now module.rules in v4+
• Many old plugins have been replaced with built-in Webpack features or updated versions

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