为了将一些动态 HTML 转换为 React 的 JSX，在我基于 ASP.Net MVC 的项目中，我想使用 htmltojsx，但不知道如何将它合并到项目中，因为它涉及 requireJS 可能还有一些其他 JavaScript 依赖项。
如果有人能以简单/清晰的方式描述它，那将有很大帮助。如果还提供了一些工作示例小提琴，我会向你致敬。
【问题讨论】：
标签： module reactjs npm webpack react-jsx
好的，很长一段时间后发布我自己的问题的答案。以下是我在过去几周对该主题的研究过程中发现的内容的简要总结。
实际上，在找到正确的观点之前，它涉及探索各种相关的主题。 要了解如何将 htmltojsx 之类的包（尤其是基于 npm）合并到 Web 应用程序中，我们首先需要了解“模块”。
“模块”是指一组高度解耦、不同的功能组成的集合，我们还能够动态加载，类似于我们在 C# 和其他一些服务器端语言中的“导入”语句。 大多数模块基于CommonJS 或AMD 格式。这是一个关于这些的非常好的博客。请务必先阅读以全面了解。
Writing Modular JavaScript With AMD, CommonJS & ES Harmony
为了让我们能够在任何 Web 应用程序中使用这些模块，还有模块捆绑器，如 Webpack、Browserify 等。
简而言之，模块捆绑器获取具有依赖关系的模块并生成代表这些模块的静态资产（如 .js/.css 文件等）。 然后，这些静态资源可以在任何网页中使用，就像我们通常使用 HTML 脚本/链接标签一样。
这里还要提一下，要使用 Webpack/Browserify，首先必须了解 node 的 npm 包管理器，它已成为所有基于 Javascript 模块的应用程序的核心和灵魂。基本上 npm 是一个包管理器，它使 JavaScript 开发人员可以轻松地共享和重用代码。它已成为创建管理良好的基于模块的应用程序背后的事实标准。
对于使用它，了解package.json 是首要且至关重要的一步。 开发人员必须在名为 package.json 的文件中定义依赖关系，该文件描述了应用程序将依赖的模块/包。
主要有两种依赖。正常依赖项，在“dependencies”选项（与输出静态资产一起打包）和“devDependencies”（参与模块和/或其资源的编译）中定义）。一个典型的 devDependency 是Babel，它用于将 ES6 aka ES2015、React 等编译成所有主流浏览器都可以理解的 ES5 语法。 在 package.json 文件中定义好这些依赖后，我们可以通过一个简单的 require 语句来使用它们，例如：
var webpack = require("webpack");
示例 package.json 文件如下所示：
{
"name": "my-sample-app",
"description": "My sample app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "John",
"dependencies": {
"classnames": "^2.1.3",
"datejs": "0.0.2"
},
"devDependencies": {
"babel": "^6.3.26",
"babel-core": "^6.4.0",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"css-loader": "^0.23.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.11"
}
}
一旦我们了解了 package.json 和一些 npm 命令，我们就可以使用 webpack 将模块编译成静态资产，然后在任何网页中使用它们。
这里还有一些链接可以帮助我们更好地理解这一切：
【讨论】：