Worktile的前端建设之路2013年，在Angular.js刚刚兴起的时候，我们大胆的选择了一个在当时看来比较新的技术。经过三年的技术积累，Worktile团队基本把Angular1.x可能出现的坑都踩了一遍。我们还写了一些关于Angular.js的插件。可以说，目前团队采用Angular.js开发项目，没有太大的技术难度。在做Worktile之初，我使用Node.js编写脚本来合并和压缩JS代码。现在想想那时候是多么的原始。后来改用Grunt工具简单合并压缩，编译LESS。使用Grunt一段时间后，发现打包的速度太慢了。当我将它用作企业版时，我切换到Gulp。速度上确实有质的飞跃。在使用Gulp的时候，我们做了稍微复杂一点的任务构建，开发环境自动监控LESS代码改动等等，等等，目前一直在使用Gulp，我们也在不断的跟上时代的变化，让自己不至于跌倒后面，所以我们也会在一些边缘项目中使用最近流行的框架、类库或者工具。Angular1.x使用模块化。大家都知道Angular1.x有自己的模块机制。模块定义如下：angular.module("module.abc",["module.def"]);上面的代码定义了一个“module.abc”模块被创建，“module.abc”依赖于“module.def”模块。然而，这种模块机制使得编写依赖于文件顺序的代码变得容易。比如a.js文件定义了一个“module.abc”模块，b.js没有定义自己的模块，而是直接使用了“module.abc”，所以b.js必须在a.js之后加载才能工作，如果存在文件依赖，则需要合并手动维护一个有序列表。所以Angular.js的模块机制并没有解决JS文件依赖和JS文件异步加载的问题。现在大家都在说前端的模块化。之前的很多选择让人眼花缭乱，比如CommonJS，AMD(Require.,关于如何在Angular1.x中使用ES6Modules，网上有很多文章介绍如何使用，推荐前端的一篇博客徐飞大叔，这里就不详细展开了，说到这里你可能会问：如果用Require.js，开发阶段动态加载每个JS，生产环境合并成一个或多个JS根据r.js等工具提升前端性能，如果使用ES6Modules，开发环境和生产环境是什么，在生产环境动态加载每个js文件显然不是最合适的。小而中型项目基本不需要动态加载，我觉得合并成一个或多个js是**的解决方案。那么如何合并ES6Modules的JS，这种工具很多，包括Webpack（目前1.x版本本身不支持，你需要我们eBabel工具），开发环境基本上也是使用合并后的BundleJS，使用SourceMap工具进行调试。如果你的开发环境不想使用合并的，systemjs也是一个不错的选择。如果ES2015（ES6）可以的话，尽快使用，因为它是Javascript未来的标准。作为一名前端技术人员，如果不能与时俱进，就只能等着被淘汰。ES2015具有现代语言语法，解决了Javascript语言的问题。关卡问题很多，包括Class、Modules、Arrows、TemplateStrings等一系列新特性。代码更简单。当然，很多浏览器无法原生支持ES2015。没关系。有了Babel，生产环境转ES5不是问题。其实ES2015的新特性数量也可以数过来。学习所有这些需要一点时间。推荐两个地址：https://babeljs.io/docs/learn...https://github.com/lukehoban/...WebpackWebpack是近1-2年非常流行的构建工具。如果前端工程师从未听说过或尝试过Webpack，他们只会感到厌恶。当然，在我看来，该工具如此受欢迎的原因当然是。它可以解决许多模块化和工程化问题，提高生产率。如果你不知道Webpack是什么，花几个小时来了解它。明白之后，不要放手。结合你自己的项目并切换到Webpack。如果可行的话，接下来怎么过渡，就算目前不用，等下一个项目启动的时候试试。Webpack的优点：支持CommonJS和AMD模块，ES2015Modules在2.0会原生支持，这个问题不大，因为我们必须要用Babel；模块加载器，可以处理所有资源，包括CSS、LESS、Image、JSON等。例如，使用babel-loader加载器可以让我们用ES6语法编写代码；CodeSplitting可以通过配置打包成多个文件，有效利用浏览器的缓存功能提升性能，并且可以自动提取多个文件。每个条目的通用代码；插件机制提供了更多的扩展功能来弥补Loader的不足，比如内置的UglifyJsPlugin压缩代码。Angular1.x+ES2015+WebpackSeed说了那么多，有点烦了，直接上代码https://github.com/why520craz...这是一个如何使用Angular1.x+ES2015+写的byme一个Webpack的sampleproject对我目前的水平来说基本上是一个很好的组织形式，包括：使用ES6Modules进行Angular1.x模块化开发；使用完整组件开发一个简单的Angular1.x单页项目；使用Webpack合并JS、CSS、Image等所有静态资源；包管理工具使用NPM，任务启动脚本使用NPMScripts；使用Webpack的CommonsChunkPlugin将引用的第三方类库打包成一个单独的bundle，将多个entry的公共JS抽取出来一个独立的bundle；使用HtmlWebpackPlugin插件生成词条HTML文件，将打包后的JS和CSS导入到HTML中，无需手动添加scripts标签和样式链接；使用ExtractTextPlugin插件将CSS提取到一个独立的文件中，当然你也可以不这样做，直接放在JS中；使用postcss处理样式兼容问题，autoprefixer自动追加前缀等。webpack还有一些示例中没有展示的更高级的特性，比如通过dllplugin只为变化的JS生成不同的Hash，充分利用浏览器的缓存，并且在频繁打包部署后，不会重新生成未修改的类库。前端开发远不止于此。有人总结了前端开发的四个阶段：库/框架选择；简单的构造优化；模块化开发；组件化开发和资源管理。大多数团队还停留在第二和第三阶段，每个阶段的实现都有很多选择。如果只想达到第二阶段，可以选择几分钟就可以达到的压缩合并工具。具体任务是使用Grunt、Gulp或NPMScripts；第三阶段需要代码级支持。选择Webpack原生支持CommonJS、AMD写法，不需要单独引入Require.js或Sea.js等类库，省去很多麻烦，也可以选择其他支持模块化的构建工具：systemjs、Browserify或rollup；第四阶段组件化开发和资源管理暂且不谈，关于全组件化开发和半组件化开发有很多争议。综上所述，一提到Angular.js，有些人可能会觉得它已经过时了，大家都在谈论React和Vue。当然，Angular2也在经历了一番波折后逐渐走入我们的视线。事实上，谁也无法预测最终哪个框架会称霸世界。但也有一些前端专家认为Angular.js只是在某些行业或公司才兴起！我不得不承认Angular1有很多问题。如果你之前的项目选择了Angular.js，那你不应该一碰脑袋就升级Angular2，即使不升级，我们也可以在Angular1.x的基础上做一些工作来适应未来的变化。慢慢的，有一天你会突然发现，升级原来如此简单。希望这篇文章能激励大家永远积极追求最好的代码，这不仅对自己的成长，也对公司带来巨大的价值。顺便一提！Webpack虽然只是一个工具，但是目前应该是个不错的工具。值得前端朋友学习，因为使用它确实让前端开发变得更简单。***内OS篇其实这篇文章来自于我公司的一个前端搭建分享工具——Webpack，主要是分享的时候现场编码，不太好通过博客展示，所以我基本没有介绍Webpack入门的一些用法，网上已经有很多大咖分享。我建议你看看Webpack教程资源的集合。基本涵盖了各类高手。您可以从初学者到精通全部阅读。如果你的英文够好，请直接看官方的Webpack文档~
