Pet*_*sen 9 webpack jspm angular
最近我将JSPM用于我的角度2项目,发现它非常简单方便.在添加新模块和创建捆绑以供生产使用时都是如此.
它基本上只是:
jspm install npm:@angular/somepackage
Run Code Online (Sandbox Code Playgroud)
并且package.json和system.js配置会自动更新.
当我想创建一个生产包时,我只需这样做:
jspm bundle-sfx app/main app-bundle.min.js --minify
Run Code Online (Sandbox Code Playgroud)
并使用它我只是做一个这样的HTML:
<body>
<my-app>Loading...</my-app>
<script src="app-bundle.min.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)
它加载并快速运行.用于小型和大型Angular 2应用程序.
开发设置也令人满意 - 重新加载应用程序的速度非常快,调试也很顺利.也可以通过JSPM从NPM存储库中使用几乎任何模块.
在阅读那里的文章时,我得到的印象是人们正在转向使用Angular 2应用程序的webpack.我自己没有移动到webpack,因为我认为我的设置工作正常,webpack似乎更多的配置.
然而,我担心对JSPM的支持会淡出,因为似乎越来越多的人转向webpack.
我应该切换到webpack吗?转换到webpack会给我一些我没有发现的好处吗?
我有一些非常简单的Angular 2快速启动模板,演示了我的设置,可以在这里找到:https://github.com/fintechneo/angular2-templates
非常乐意获得有关切换到webpack的优势的一些意见.
更新2017-03-26
自从发布此问题以来,我发现生产构建需要更快的加载时间.即使JSPM(或webpack)生成优化的bundle,它仍然太大,需要在下载bundle之后编译angular2模板.
所以我找到了Ahead-of-Time编译器手册(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) - 这使得小包在下载后立即启动.
这需要一个并行设置,尽管使用npm(而不是jspm)安装了所有角度模块.也许可以通过一些努力来使用JSPM,但我还没有考虑过它.JSPM和这个AoT cookbook都使用汇总,因此它将使ngc编译器步骤与JSPM集成,但棘手的部分是让TypeScript使用jspm_packages而不是node_modules.
上面的设置链接使用AoT进行更新,并仍然使用JSPM作为开发环境.
这个答案要求细分如下.
SystemJS v JSPM
JSPM本质上是SystemJS,其优点是JSPM为您配置systemjs.config.js.当它工作时我喜欢JSPM(可悲的是,它始终不是).
这样做的好处是JSPM还可以为您捆绑JS文件.
JSPM v Webpack
鉴于JSPM实际上是在使用SystemJS,这个问题基本上应该是我们使用SystemJS或Webpack.
不是了!我之前已经回答了这个问题(最佳答案)
对该内容的简要重复是Webpack不会取代SystemJS(或JSPM),它只会使它们变得多余.
但是,这里有一个扭曲,即JSPM提供捆绑.那么为什么要转移到Webpack?
JSPM的好处是易于配置.
同样的好处也是它的垮台,因为配置简单意味着缺乏选择,缺乏选择意味着缺乏控制.
Webpack不仅包含JS文件,它还将CSS,HTML和其他所有内容捆绑到一个bundle.js文件中(一旦缓存)使Webpack应用程序快速闪存(但最初加载速度很慢).
此外,JSPM满足了捆绑器的需求,但您如何使用JSPM转换文件?例如,如果我想使用Stylus而不是CSS,那么我的Stylus文件会转换为CSS吗?我是否会把Gulp扔进混合体中(我现在很伤心,它有1/3的Webpack下载,但在6个月前领先).或者切换到Webpack?
我不是Webpack的粉丝,因为它的文档很差,但考虑到它拥有如此巨大的市场份额,我想我们很快就会在Webpack上跳.
| 归档时间: |
|
| 查看次数: |
2105 次 |
| 最近记录: |