index.html中模块引入包含jsx语法的组件, 这种组件Babel能转译吗?-灵析社区

猫界袁隆平

[demo](https://link.segmentfault.com/?enc=WYFU%2FxOLZt0g4TpEDkdaUQ%3D%3D.2XaCQYFdegfqud7NT5tL3XpO%2BIzu7gfCsTqYFzXhns2A7zYlU4rO7Efy1AdwLiuePbYud5qa3X%2FMpRLR3MmJF7eqSQB691yI9OXYhciBY0mdQT1rEG2cLzwxvEAlxL8ThtpgmitUE9o8BatIWPGjcEyC3v%2B5J6zEdf4mMoNNwLRVADb7PMyiUHOIFxhYotDarCWcZB58wCYkllVeXtjSIr9OZDahVQ6n32C%2ByYTerizbbpw4j%2F6oiK%2BGfafR43SCmEippNApaWO4Ttcc1cTjhMNXaBp2WlkpT9c7dRsnr3YUsWqG%2Fp35XZYSVM0otxuVLUSl99EC0LQjJdH7GY3Ecdjh5YtqTktDQ6nyGV7QTLmJyPQUto%2F%2B0b7fyLcv05qMXykFru1zUKfSRC%2Bt6nH%2Fbn16Hu1%2Fne%2Fkco0pRxLRVgu606vPnbMndAPXrU11WODflSp41xob9wa73A%2B6BKkyZNVv5UW00iDFeifMkRFnSoQFKbFT7ZRSzhVkzaGxKdizOjwk%2FjqkfIuMLiTWkToCOVXicqU9pjr96YGZ58196JnRqdFJv3hSGl7X2UsVS1efksGFJWD0inD%2F3wJq1SJaGNtf5G7aulDz6zjMl8YoDs2Wf2h5kaTc8oFe8Zfo7JhHnMDl8hSRoeEYWTwti9C7UJHOwfQu31MwXNxZUKFHYCMxogc073ISTzakWNsKyO8UoHWcH%2FM0sbOMxsAb%2FKN1W4cRklWbJANJXZzUDjSHIlOIFvlSVJacXiY7tOI4btz6xoFAcdEIW4tpNM7BIEg138egkdMSBhWIxO1yCsDzzeaNPy7I1wz4CKU6xhl7R1uSJxc2aXp7mQ7n0A%2BGzg6kQIOQeOlaMRfIT0d04YHvqjc6GbwJgU7zcDEK%2BxZpA8h%2Fq%2BUJ4QY6YuY%2BphWmB4qyAfU40oCdq9a1l6BNigKFARuPb7bQzef6aHZlmunxH0veh2PjvIpLNXh%2BAtQV3zP4YdXEi9tEwOFsoz9CelEJFoT4C5DjzGh5IgSziyF9A%2BshJ6jY5sOJnc60%2BQr86o0OublA3PknGbgRhKgUItaJ7mkhEfBz5CCf2CKFCK0jT9F5xkvr41ysjvh%2FtI9nuuMvYrtfmWgWklU%2BBlZf8PuaQOb3mTtYlaS%2BcBUSrsnBSIF1ulXC%2Bb2YmKSbcstizoko7KJs638IRwGGm8LgZrqXmWDVpd1OtAijhe89cjMvij%2FNcbO0qw4NdN%2Ft30L4i7k879IVD10PfPxhYDFlTmeJcNc%2BhmzYZJZlSllLSvlNH8M78CjO34DGlH7qs8%2FGa750CBCqmjuWZmmhEoO%2F3SFVmrTBdZkiTs7DDSVRgSbXzfeWSKvFkzRcijDoa3oOb57KekAfnm3SYuW52BMWfn2Rpa7vOkgbbDUD9Tglc2BijcbRqEqeCu%2Ft3QLzvb1gqKjo%2FcOP5BiSD2akdAaBcrDk4ptMMUoNsom9kLz8Gywhkyc79Orl5OktAruqTKH9WkOu04v6q1RPPni7QbA4%2Fz5iol4t%2FEdRrIefK9CBP85Gz5HkGPoDZ44l3nlqdGQIoKNYwsydn99vw5Ou7eRKH3QlYnq0NMN0muESIQ4T4oSZ4zV3XsOsKTSL6fIwiXYIu5sbMYkwxQihAzu%2Bqe8%2BZKzK3SY3w1VyQCNSLDUUXT1CDWi7ZmqZw4fvExRVa8rQtt3Wn5IoS%2Bzce%2Ft2Yt6z7BcP7hi7yhbYgn7%2FFySuseuPmk2KkCvAFRUgO0XTZyE%2F95OcjVTkrqs5lOQo3%2FAuNNS7z4%2Fl95HMdbusqS9kIweoNKfBlYudHXRfylfnhYou2EpAswH2JLPnLnivCZkVYF4eMBCkFgXiwW1uOuFo%2BtOdF%2FlTH9iAq%2BEOVRev3hR%2BHDz%2BPmTrcyUsxaSV0RtyoMlGT22xYC6paB1NlkFSlH60BWNq3gP7pBuKUesvLtxyuwldK1SM%2BkGfiHRGsyEWh7s8gLSI6Ollp2hEmBEw8j7EeUt1e5RqN1nz%2BcrVT%2F5MtUUf2DW5QR%2BF30jeglBzZxfXra%2FomJRsthn2uBNQoKURE5tRgr3EbRBaaJW90ce%2BKgjDwLtp3fphJRym3T0AD%2FrbMLw0P9g8K6zFfUDgYzRCa7ZAze8FdIU1a%2FMRWrRlCG7c2Mqz2rbj0xov%2BS6AtGol81RijbFKNESQuHcjnd%2BnVt%2FUn0N6S4cA8CED7aHdyaiUFAoHlGiAOMvqxVrRZbdpsMZQA%2FUIptT1w89ORAgSbUFF3R8tKpzv1hbStOG4KqC3sGkkUaehnuMRFFW1PEPbS%2FOR5cf6Soaj47Vx0VQ7PZYAW9v%2FsUKJoDiyX%2FGGW0b6lX4pO40eeitwINh6eNaLnBQwwwBv3dmndR3o%2BNrdNYyE4Y7xGxQwF2FvupzDWjCM866xFpBndwnkCiCH9czKfl%2BUrSk%2FI86N6WMeVv8adq3dAwkqaIoQVCJML5OfRrWALTn30Cj4cEGwTGDaOZWc6vTfp%2B82Szvk%2FgeMGEZVY8zHdK4o%2B6jkXF4pzmf0Zndcax5cFlbV6264TpuRGKrGhHYSmIH1hg5omnMhOIvpHZS7UKf%2BVAP3OeFsGO8jzPdLnQX7ojXjvRFPT82HO5gvuA8gj9t8B5c0ddwySdFXG3qHdL%2F6UMEiBE5%2FWGXebDY0X6ZWkQ7g9Wpu3jNDBElKirVV3kj%2FtrAXnqZHu2X6rlgWSdrxL5x7l%2Fg6AdJkoUj6nuaf1otjuBKcJtGk6BD9TtwYwnHtpRUBXYGB1Km6pE7D2Fhpec1M87kshyUVztaPjvfsog6ZDa2mcCWdeDBqIjWlwLC%2FtKsrCZdQ6XW8h3Nyk6l%2ByjIw5Bm%2BpnZ6%2BzIPKAMW6N2bbF6qe8iw9pktJNzPCgvqTmfpZTWotI3PEF9J%2BJzzgerUoPhNsyQTofoXrrq5qTQnOJ75HL3amJ3tmF%2FqEPW%2FDkQYS2yNHS39R1VyS9IvZqiF2OAHG3ij%2BMp7PFJQFT1%2FdWTAqe4I5oeVZ%2FAvXzQghg7ka11r7AGzbZriEe76Iass0bRstz30JyH4YLtSVLBXPrsXxVMeHYXGkSVbhD1%2FMZ%2BON92lisGuEn75KOmhb0eiIg8GlAvuGMuzNxOoMMtQaRC8jOjTzz8TVXGEoRY%2B6rxB1RTI%2FB7Oe6gPw0Cu%2BNpuDN5GS4OYOEudbLEFSedNlC%2FHNm67MLOXjQCMkK8PJ9Vw2uAB3TFj6CdChqO7K27VbA3X6Mjk7TewwhmLeOt9Re6J%2BapAwlMQ2m%2F7gFKHCueKJu1%2ByNABRUYpLfJ4tJF1GF4L4zUipfgHAo2NWLhu%2BRU4PpYUg%2BuqWrQHW5Z8wSrxH08q7RMCWyMVziVzBPAyzAaFT4Qy1jnWl2cX6Yby1apAFLyZLA1QTzjqN3rTZp77jLtQ%2BmHz9sH4FOxwSouym2j1iL3UT%2FYxHd%2FehYAvoaPYRqXCLQCVZvdau8xN90DvqLeHDhCRC8SbY8xtJ9FzmktoUvbVpt0CmUuG5AlIFVhtVpc1yXF4CmOTRV1gGCpG8D5f0w5%2BvG%2FwRJ7vctG4etJqpCs876WHf61bLTJgskLW0TMVA6F3b0qYD5GiWss%2BkpbtvRDjJHkFHQby3hU8fqvjbGmo5uo%2FCuGpCifyHowEn3xLBiGyXO9b%2FHx8hpqWu6vpOntcwnQmEHeMcR3PXKe1zM4axM9SPFj8Oi7%2BEKnGQuTzPsziiMhqex%2FCo42qUTse%2BgGFZx6ISggxsVYP6ar5tS4b6ce97VSZ3Lkjp6abQ4%2BRf4%2FL3MuXR5AsDZsDiKz7lUMZWLR%2BVmjGEgyyYYb9i5XSZXal8zsHo0zgfGIlY5tI9h81VgUapnCb7K3sxWTUBvgrJV4FxMqLDZQop60j3V371sbeFPOd2UdjLIPffHycWv%2BfWOfcB4uBheK2XOpoDyyPKx1cNbRf00vh6T0sNlI5ANJeuQtGFh03NWd4hhlW9rJafRHEx8piz0Oh7RIQ4b9vaK%2Bstkri%2Btx7JHUEquJFd%2FERDiKwYQD0y63AHI7MspzFlWarF%2FhYIdbL4Fq71kY4sK4N2aZR8C1EY%2B6EfyOarnzFcw96YBC2ssg5LDnXVaN0rd4sE0NridvQJDDnzZsCzNQrz17LkGvZqZITpIR6W7YL03e%2Bl54AOtRo7UMC0CAhakvGvsUSMaBIn63vcO4QI%2BjS8cUmwuDa4Esn2ko6UGDSjA%3D%3D) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/aadbbd7d13593e5e0012184301d6c1d2.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/c59bca0f8572647bee3bb5fe4d0fa4b3.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/f6859887e8ca1d4b9702d3cb8d862134.png) 上面 DemoCom.js中用到了jsx语法, 然后index.html中以模块方式引入, 这个时候控制台报错. ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/f8eb85360165e274aaed64ab8e011600.png) 好像是无法解析 DemoCom中的jsx语法. 问题: 在不引入模块打包工具 和手动转译的情况下 有什么解决方案吗

阅读量:145

点赞量:0

问AI
«在不引入模块打包工具 和手动转译的情况下 有什么解决方案吗» 没有。 你要理解,现代化的前端工程体系的基本逻辑,就是把各种源代码转译成 HTML+CSS+JS。浏览器只负责渲染标准的 HTML+CSS+JS,但是前端开发者可以根据自己的需要来组合不同的技术栈进行开发。大家一起进步,整条产业线同步发展。 所以你只能基于浏览器规则来做这些事情,没法想怎么做就怎么做。