React组件经webpack打包后能否通过script标签引入并在HTML中使用？

结论 #

完全支持这种直接通过script标签引入后调用的方式，无法访问到组件是因为webpack打包配置未将组件暴露到全局作用域导致的，按以下步骤调整配置即可实现需求。

调整步骤 #

1. 调整webpack打包配置的output字段，将导出内容挂载到全局window对象

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // 你的组件包入口文件
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist'),
    // 全局挂载的对象名，可自定义
    library: 'CustomUI',
    // 适配script标签引入场景，也可设置为umd适配更多引入方式
    libraryTarget: 'window',
    // 兼容不同环境下的全局对象指向
    globalObject: 'this'
  },
  // 新增externals配置，不要把react、react-dom打包进你的产物
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },
  // 其他你原有webpack配置（loader、plugin等）保持不变
}

2. 入口文件导出你的所有组件
   在你的组件包入口文件（比如上面配置的src/index.js）中，明确导出需要对外暴露的组件：

// src/index.js
import CustomButton from './components/CustomButton';
import CustomInput from './components/CustomInput';
// 其他需要导出的组件

export {
  CustomButton,
  CustomInput
}

3. 修改HTML中的调用代码
   引入打包产物后，你的所有组件都会挂载到你配置的全局对象CustomUI下，调用时按如下方式写即可：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  <script src="build.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/jsx">
    // 可先解构再使用
    const { CustomButton } = CustomUI;
    ReactDOM.render(<CustomButton />, document.getElementById('root'));
  </script>
</body>
</html>

注意事项 #

• 配置externals是为了避免重复打包React、ReactDOM，和HTML中引入的CDN版本保持一致，避免出现版本冲突、hooks报错等问题。
• 如果你使用的是其他打包工具，对应修改全局暴露配置即可，核心逻辑都是把组件导出挂载到全局window对象。

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