无需Webpack，如何在Script引入React的项目中使用react-slider？

嘿，刚好我之前在纯CDN引入React的项目里折腾过react-slider，给你梳理下具体怎么做：

因为你现在没有用Webpack这类打包工具，原来的ES6 import语法肯定用不了了，得换用UMD版本的react-slider——这种版本会把模块直接暴露到全局的window对象上，适合纯CDN的场景。

步骤1：按顺序引入依赖资源 #

必须严格按照这个顺序加载，不然会报错：

<!-- 先加载React和ReactDOM -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 如果你要写JSX语法，得加Babel的CDN来转译（浏览器本身不认识JSX） -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- 最后加载react-slider的UMD版本 -->
<script src="https://unpkg.com/react-slider@2/umd/react-slider.min.js"></script>

<!-- 别忘了加react-slider的默认样式，不然滑块会丑到没法看 -->
<link rel="stylesheet" href="https://unpkg.com/react-slider@2/dist/react-slider.css">

步骤2：在组件里直接用全局的ReactSlider #

UMD模块会把ReactSlider挂载到window上，所以你不用import，直接用这个全局变量就行：

示例1：不用JSX（不需要Babel） #

<div id="root"></div>

<script>
  const { createRoot } = ReactDOM;
  const root = createRoot(document.getElementById('root'));

  // 直接用ReactSlider，window前缀可以省略
  const SliderComponent = () => React.createElement(ReactSlider, {
    min: 0,
    max: 100,
    value: 30,
    onChange: (val) => console.log('滑块当前值:', val)
  });

  root.render(React.createElement(SliderComponent));
</script>

示例2：用JSX（需要Babel） #

注意script标签要加type="text/babel"，告诉浏览器用Babel转译里面的代码：

<div id="root"></div>

<script type="text/babel">
  const { createRoot } = ReactDOM;
  const root = createRoot(document.getElementById('root'));

  function App() {
    return (
      <div>
        <h3>自定义滑块</h3>
        <ReactSlider
          min={0}
          max={100}
          value={50}
          onChange={(val) => console.log('当前值:', val)}
          className="custom-slider"
        />
      </div>
    );
  }

  root.render(<App />);
</script>

小提醒 #

• 生产环境记得把development.js换成production.min.js，比如react.production.min.js，这样文件更小，加载更快
• 如果需要指定特定版本，把URL里的@2改成你需要的版本号就行，比如@2.0.1

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