当每个人开始熟悉React或Vue时，就像使用两个最流行的前端框架一样，我们当然都使用了魔术命令
npm install, npm build 。 而且只有在那个爸爸“公开”之后，我们才会“在必要时”部署。
但是还有另一种（我将其称为
变态的 ）非标准方式，许多前端初学者开发人员甚至不知道这种方式，因为他们“长大”了npm install / build。
但是，如果您不需要构建，而只需在html中插入js代码怎么办？
等待吐唾沫并用“ I love node”字样扔石头……我们当然知道，没有组装，我们将失去单元测试，速度以及如何处理导入组件和文件层次结构，以及一般的意大利面条式代码事实证明...
那么，您（和我们）为什么需要它？它如何工作？
前几天，一个来自“企业”的命令向他们的BPM / ERP系统添加功能，该系统本质上是经过高度修改的Redmine。 所有这些奇迹已经完成了很长时间，并且正在带有大量帮助微服务的VPS服务器上旋转，以读取生产数据，机器等。 您无法触摸操作系统...
Redmine-用Ruby on Rails编写，并在服务器上生成整个前端。 在那里添加的插件中的所有前端交互都是通过jquery进行的。 现在RoR已经学会了使用webpack的方法，您可以使用“ human npm”，但是它是最新版本，并且我们拥有古老的Ruby和Centos 6，在这些版本上都没有Ruby或rails的最新版本。 我不想从源头收集所有东西以增加几种反应形式，因此，我们开始寻找一种将React或Vue添加到Rails页面模板的方法，就像不带npm和程序集的常规JS一样。
并迅速发现，并且两者兼而有之。
没有Vue npm的Vue
使用Vue，一切都变得非常简单。 初始化组件看起来当然是“奇怪的”，但通常是可读和“可写的”。
在Vue上带有组件的简单页面的示例：
<html> <head> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> </head> <body> <div id="vue-app"></div> <script type="text/javascript"> const titleComponent = `<h1>{{ title }}</h1>`; var app = new Vue({ el: '#vue-app', template: titleComponent, data: function () { return { title: 'Stranger Vue things' }; } }); </script> </body> </html>
浏览器下载的文件：371 Kb，时间：590毫秒您甚至可以使用
http-vue-loader以常规.vue格式导入Vue组件，而不生成意大利面条代码。 我非常惊讶，依赖项只需要一个提示，这是个好消息。
没有React npm的React
使用React，一切都变得有些复杂，但没有太多。 为了使JSX正常工作，您需要导入babel。 要使用DOM，您需要react-dom。 没有以上条件，反应将无法正常进行。 而不是一次导入，您需要执行三个。
一个带有组件的React的简单页面的示例：
<html lang="en"> <head> <title>React Stranger Things</title> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const rootElement = document.getElementById('root') class TitleComponent extends React.Component { render() { return ( <h1> {this.props.title}</h1> ); } } function App(){ return( <div> <TitleComponent title="React Stranger Things"/> </div> ) } ReactDOM.render( <App />, rootElement ) </script> </body> </html>
浏览器下载的文件：542 Kb，时间：589毫秒在这里，与Vue不同，您不需要将组件模板编写为字符串，我们照常编写所有内容，这非常方便并且不会造成任何不适。
我们选择了谁？
如果采用浏览器下载的js导入大小，则获胜者是Vue。 但这只是乍看之下。 由于我们没有很多组件，因此我们在两个组件上都完成了任务。 而且在React中编写更加方便：使用程序集编写时几乎没有区别，并且导入的区别也不是很大。
但是，Preact呢？
Preact是
react的“迷你”版本，它稍快一些，仅重3 KB。 当我听说我们的任务时，我想起的第一件事就是做事。 打开文档并不令人意外：React≠Preact。
Preact没有JSX，组件的拼写与React非常不同。 为我们的迷你任务学习以“精确的方式”书写是非常多余且“昂贵的”。
这是拐杖！ 和他们一起打他
我们知道这是拐杖。 但是有时您必须根据任务发明此类解决方案。 在正常的前端开发情况下，在该实施例中使用框架是一个糟糕的拐杖，并且当然根本不建议这样做。