现在前端实际项目中JS都用什么模块标准与打包工具？

发布于 2022-09-05 02:29:55 字数 299 浏览 18 评论 0

用requirejs的项目还多吗？
还是都改成webpack结合es6的import了？
我一直对采用什么模块标准写前端项目而纠结，自己一直用requirejs，但是一直不会打包压缩，今天想用gulp中的插件打包一下AMD模块，结果始终配置不成功。后来想了想requirejs是不是已经快淘汰了，干嘛还要研究它...，但是像webpack这样的打包工具好像浏览器兼容性不是太强，IE8好像不太兼容。所以：
能否介绍一些大家在实际开发项目是采用的模块标准与打包工具，感激不尽（不考虑用React、Vue、angular这些框架的项目）

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如痴如狂 2022-09-12 02:29:55

require.js要学习，而且还要做进一步的研究！

个人感觉，除了vue、react、angular2+这些框架搭配使用webpack，其他类型的项目用webpack的应该不多吧。
我们公司项目：pc端用的angular1（因为要兼容ie8，艹），本身自带依赖注入功能，就用不到require.js或webpack了；移动端用的framework7，用是require.js来处理模块化的东西，然后用gulp来处理合并、压缩等工作。

即使你在使用三大框架做开发，require.js也是必须要看的东西，为什么这么说呢？
讲到require.js，实际上我们是在说js的模块化，那么js的模块化有哪些方式呢？立即执行匿名函数、命名空间、sea.js、require.js、es6的import/export等等等等，这些都是属于js模块化的知识点。面试中，模块化基本上是必问的，难道你不扯上两句require.js吗？既然扯上了，难道不应该会使用吗？会使用之后，难到不应该进一步研究一下它的实现原理吗？进一步追问require.js和webpack的打包原理分别是什么样的，为什么require.js采用这种方式而webpack采用那种方式？……
以上都是我最近面试阿里网易滴滴所碰到的，而且require.js必问，基本上都涉及到原理层面了。所以从整个前端模块化的学习进程上来看，我认为require.js还是有必要看一下的，能研究一下实现原理更好了。

回复收藏 0

夏尔 2022-09-12 02:29:55

模块标准有多种，都可以用，但要理解他们的区别，commonjs AMD CMD ES6模块管理规范。

打包工具也比较多，gulp webpack rollup fis3。

这些东西没有说哪个好，哪个不好。具体需求具体考虑。以后还有新的打包工具呢？所以多学多理解思想才是最重要得，不要纠结于哪个工具好。现在什么通用。

回复收藏 0

过去的过去 2022-09-12 02:29:55

或者大家不用模块，只是用gulp合并加混淆？

回复收藏 0

記柔刀 2022-09-12 02:29:55

问过专业前端，实际上公司项目中这些工具用的人好像不多，他们个人项目有时候用

回复收藏 0

青朷 2022-09-12 02:29:55

谢邀，首先我这边项目目前使用的是es6+webpack打包，gulp早在15年年底就已经放弃了。
webpack打包出来的确实在ie8上有时候会有些兼容问题，我的建议是适当的配置来规避掉。

export default 换成export {}。因为babel会将export default 转化后会带Object.defineProperty，ie8 不支持对象的Object.defineProperty。当然如果非要用，可以在需要被转码的js上加es3ify-loader解决。export.default 在babel转化后代码如下
```
    "use strict";
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });

    exports.default = {};
```
引用es5-shim.js/es5-sham.js来确保转化后诸如bind,Array.isArray等ie8不支持的es5属性
使用babel-polyfill.js 将其提前加载在页面中，以解决低版本无法通过其自身api实现的库，如promise,Object.assign，它可以模仿实现如：将promise的延迟执行promise.then替换成setTimeout。
禁止使用Object.defineProperty 这个api es5-shim.js/es5-sham.js和babel-polyfill都无法实现

具体遇到问题可以参考这篇文章react 项目的一个ie8兼容性问题。虽然是react的ie8问题，但是在转码上有共同交集。

回复收藏 0