gpt4 book ai didi

javascript - 将静态jspm资源加载到生产index.html?

转载 作者:行者123 更新时间:2023-11-27 23:56:35 25 4
gpt4 key购买 nike

也许我错过了一些东西,但这是我的问题:运行gulp dist进入“生产模式”后,所有javascript文件都捆绑正常,但在index.html中仍然引用jspm_packages 文件夹以及一些 JavaScript 文件,如下所示:

   <head>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
</body>

所有这些引用都不再存在于 dist 文件夹中,该文件夹是在 gulp dist 任务中创建的。

以下是来自 GitHub 上的 React+JSPM 项目之一的用例示例:https://github.com/tinkertrain/jspm-react

这种行为在我遇到的许多项目中都很常见,所以我可能遗漏了一些东西......我应该配置一些东西来进行一些调整吗?也许调用另一个任务来创建我自己的“生产模式”html?

干杯

最佳答案

你必须处理你的html并替换所有那些<link><script>与生产的。可以说有很多方法和工具可以做到这一点,但正如您所说,您正在使用 Gulp,您可能需要检查 Gulp-html-replace .

基本上,这个想法是添加一些 html 注释,指示您选择的工具将这些标签替换为生产标签。对于你的情况

   <head>
<!-- build:css -->
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
<!-- endbuild -->
</head>

<!-- build:js -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
<!-- endbuild -->

将产生:

  <head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script>
</body>

关于javascript - 将静态jspm资源加载到生产index.html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32209943/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com