Comments (21)
2betop
commented on July 18, 2024
1
补充完整点：
<script type="text/javascript" src="/static/engine/require.js"></script><!--ignore-->
<script type="text/javascript" src="/static/framework.js" data-framework></script>
<!--RESOURCEMAP_PLACEHOLDER-->
<!--SCRIPT_PLACEHOLDER-->
<script type="text/javascript">
require(['page/index'], function(app) {
app();
});
</script>
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
不能重现这个问题，请 git pull 后重试。
from fis3-postpackager-loader.
worry127722
commented on July 18, 2024
复现过程：
html页面中不要添加 ”“，
设置 useInlineMap: true，即可复现
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
嗯，改出了点乱子来，现在应该好了。
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@2betop
发布前:
<script src="/static/engine/require.js"></script>
<!--RESOURCEMAP_PLACEHOLDER-->
<!--SCRIPT_PLACEHOLDER-->
<script>
require(['/static/page/index'], function(app) {
app();
});
</script>
发布后：
<script type="text/javascript" src="/pkg/template/index.html_map.js"></script>
<script type="text/javascript" src="/static/engine/require.js"></script>
<script type="text/javascript">
require(['static/page/index'], function(app) {
app();
});
</script>
js顺序有问题，但是不加占位符的时候是正确的
from fis3-postpackager-loader.
oxUnd
commented on July 18, 2024
咱们都是程序员，从程序员的角度考虑一下这个问题。当你引入一个 require.js 的时候，如何知道它就是 require.js 而不是其他什么 js 呢？
- 匹配看是否叫名字 require.js 这个通用性太差了，放弃
- 第一个 script 认为是 require.js，这个貌似还可以，但是还是有点限制
- 标注一下，主动设置说明它就是 require.js
我们选择第三种，大家都知道这种更通用一点，从程序员的角度考虑。那么这时候就想到用什么方法标注呢，看看文档发现是这样；
<script data-loader src="require.js"></script> 这个问题就解决了。
你觉得呢？
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@xiangshouding 加了 ·data-loader· 也是会这样的。
from fis3-postpackager-loader.
oxUnd
commented on July 18, 2024
@ccqgithub 你再确认一下，如果还是这样就是个 bug 了。
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@xiangshouding
发布前
<script type="text/javascript" src="/static/engine/require.js" data-loader></script>
<script type="text/javascript" src="/static/framework.js" data-framework></script>
<!--RESOURCEMAP_PLACEHOLDER-->
<!--SCRIPT_PLACEHOLDER-->
<script type="text/javascript">
require(['page/index'], function(app) {
app();
});
</script>
发布后：
<script type="text/javascript" src="/pkg/template/index.html_map.js"></script>
<script type="text/javascript" src="/static/engine/require.js"></script>
<script type="text/javascript" src="/static/framework.js"></script>
<script type="text/javascript">
require(['static/page/index'], function(app) {
app();
});
</script>
pkg_map会跑在loader前面去，但是不加<!--RESOURCEMAP_PLACEHOLDER--><!--SCRIPT_PLACEHOLDER-->的话，输出正常
from fis3-postpackager-loader.
oxUnd
commented on July 18, 2024
哦，那就别加，你看看 README 说得还是挺清楚的。
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@xiangshouding 恩，不过有个建议，既然把这个占位符 放出来，就应该让相应的资源出现在占位符的位置吧？
readme里有这段话。。
默认会把页面中用到的样式插入在 header 中，脚本插入在 body 底部。如果想修改，请在页面自己插入 和 占位符来控制位置。
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
@ccqgithub 你把 obtainScript 设置成false应该就满足你的需求了，这样只会自动加载文件依赖，而不管你通过 <script> 去引用的资源。
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@2betop @xiangshouding 谢谢你们的解答，问题已经解决了。
不过，我有点完美主义，所以把发现的问题在这里提一下~~
这也算是个小bug吧。。。
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
@ccqgithub 确实就是因为要用户指定的位置优先才出现了问题，因为收集 js 在 SCRIPT_PLACEHOLDER 里面，然后自己设置的 RESOURCEMAP_PLACEHOLDER 放到了前面，这样的输出结果是先是资源表，然后才是剩下的 js。因为 资源表必须要在 require.js loader 的后面，所以会报错。
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@2betop 恩，现在问题是，不加<!--RESOURCEMAP_PLACEHOLDER--><!--SCRIPT_PLACEHOLDER-->的话，一切正常。
加了<!--RESOURCEMAP_PLACEHOLDER--><!--SCRIPT_PLACEHOLDER-->占位符才会引起顺序不对。
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
还有一个解决方案：
<script type="text/javascript" src="/static/engine/require.js" data-loader></script>
=>
<script type="text/javascript" src="/static/engine/require.js"></script><!--ignore-->
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
我是这么认为的，如果你不写占位符，我们会自动把 resourcemap 放在 loader 的后面。但是如果你要自己控制位置，那就得自己保证运行的正确性，上面显示的方式是，不把 require.js 收集，然后 resourcemap 的占位符正好也在 require.js 的后面，然后顺序就对了。
from fis3-postpackager-loader.
ccqgithub
commented on July 18, 2024
@2betop 了解了，3q
<script type="text/javascript" src="/static/engine/require.js"></script><!--ignore-->
<script type="text/javascript" src="/static/framework.js" data-framework></script>
<!--RESOURCEMAP_PLACEHOLDER-->
<!--SCRIPT_PLACEHOLDER-->
<script type="text/javascript">
require(['page/index'], function(app) {
app();
});
</script>
是正解
from fis3-postpackager-loader.
codering
commented on July 18, 2024
@2betop 问个问题， 当页面上出现了同步require，RESOURCEMAP_PLACEHOLDER就不会输出，只有都改成require.async才可以， 为什么？
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="./mod.js"></script><!--ignore-->
</head>
<body>
<div id="content"></div>
<!--RESOURCEMAP_PLACEHOLDER-->
<script type="text/javascript">
// @require ....
var a = require ('./mod/m1')
console.log(a);
</script>
</body>
</html>from fis3-postpackager-loader.
2betop
commented on July 18, 2024
同步 require 在页面里面用 <script> 引入了，不需要 resourcemap, 只有异步依赖才需要
from fis3-postpackager-loader.
2betop
commented on July 18, 2024
合理啊，都同步加载了，还会发异步请求吗？
from fis3-postpackager-loader.
Related Issues (20)
- 解决了
- [improvement]有没有考虑继续完善一下这个插件，更加智能方便一点？ HOT 1
- 为什么升级插件需要全局安装之后libsass的错误又出来了，一直有这个错误？ HOT 2
- css加载顺序问题 HOT 1
- <!--RESOURCEMAP_PLACEHOLDER-->定位无效
- Bug
- 混用[es6]import和require会产生两个_aio.js文件 HOT 17
- loader配合domain产生bug
- ignore清单失效 HOT 1
- 对依赖的js文件有顺序要求的，应当如何配置打包？
- css文件合并后的type依然是'js'
- 打包后，个别文件还是没有合并到一起 HOT 4
- 合并打包的js资源，能不能加个属性crossorigin的配置 HOT 1
- 请问aioPkg字段的生成逻辑是怎样的
- 打包忽略文件对css无效 HOT 1
- 与packTo合并js的功能协作问题。 HOT 3
- resourcemapWhitespace配置项缺失 HOT 2
- 设置fis.hook('amd') 依然生成 require.resourceMap()而不是 require.config()?
- 能否提供支持抽离公共js代码功能 HOT 1
- css 没有合并在一起 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fis3-postpackager-loader.