安装

<script> 标签引入

直接使用 <script> 标签引用 CDN 资源，Comment 会被注册为一个全局对象。

请确保在引入 PC 版评论之前引入所有依赖：

• jQuery 1.12.4

PC 端项目通常需要支持 微信 / QQ 登录授权，因此你必须显式引入 PC 版 MiloJS：

<script src="//ossweb-img.qq.com/images/js/bsCommonFiles/library/jquery/jquery-1.12.4.min.js"></script>
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script
  src="//ossweb-img.qq.com/images/js/bsCommonFiles/comment/comment-pc-1.0.min.js"
  charset="utf-8"
></script>

注意：MiloJS 必须在 jQuery 之后，评论组件之前引入

开发环境 vs. 生产环境

<script> 标签引入的是使用 UMD 构建版本：开发环境下不压缩代码（comment-pc.js），生产环境下压缩代码（comment-pc.min.js）。

当然，它们之间绝非仅仅是文件大小的区别。我们会根据你当前引用的版本调用不同的服务端接口：

• 当你引用开发版本时，默认调用的是测试环境接口
• 当你引用压缩版本时，会自动切换为正式环境接口

因此在开发及测试过程中，你必须使用开发版本（comment-pc.js），它还包含我们提供的完整的错误提示：

<script
  src="//ossweb-img.qq.com/images/js/bsCommonFiles/comment/comment-pc-1.0.js"
  charset="utf-8"
></script>

对比	comment-pc.min.js	comment-pc.js
体积	压缩版本，体积小	未压缩版本，体积大
提示	无错误提示	包含错误提示
接口	正式环境接口	测试环境接口

NPM

在大型 / 单页应用中使用评论组件，我们推荐使用 NPM 安装，NPM 能很好地和 webpack 等模块打包器配合使用。

使用 npm 或 tnpm 命令进行安装：

npm install --save-dev @tencent/comment-pc

由于 MiloJS 不支持 NPM 安装，因此必须在 HTML 中显式引入 MiloJS，同时，由于 MiloJS 依赖 jQuery，因此显式引入 jQuery 也是必须的：

<script src="//ossweb-img.qq.com/images/js/bsCommonFiles/library/jquery/jquery-1.12.4.min.js"></script>
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>

安装成功后通过 import 导入使用：

import Comment from '@tencent/comment-pc'

开发环境 vs. 生产环境

值得注意的是，当你使用 npm 安装时，我们提供的是 ES Module 构建版本（comment-pc.esm.js），该构建是用于打包工具的，因此我们不提供压缩后的版本，你有必要在你项目最终打包的时候压缩它们。

ES Module 构建保留了原始的 process.env.NODE_ENV 检测，以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换它们的环境变量以便控制 Comment 所运行的模式。把 process.env.NODE_ENV 替换为字符串字面量同样可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境使用的代码段，减少最终的文件体积。

需要注意的是，只有当 process.env.NODE_ENV == 'production' 时，评论才会调用正式环境接口，否则将默认调用测试环境接口。

使用 Webpack 的 DefinePlugin：

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
      },
    }),
  ],
}