文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

在前端中理解MVC服务之TypeScript篇

通过开发一个网页应用来理解构建前端应用的方法，其中，使用JavaScript作为脚本语言，并转向使用JavaScript/TypeScript作为面向对象程序开发的语言 在这一篇文章中，将使用第一个版本的...我们不会专注于构建应用的工具，因为我们将负责用gulpfile来执行项目所有的转换任务 在这种情况下我们决定使用gulp工具，当然，如果用webpack也是可以的。...const gulp = require('gulp'); const browserify = require('browserify'); const source = require('vinyl-source-stream.../**/*.ts', gulp.series('browserify')); gulp.watch('src/**/*.html', gulp.series('html')); gulp.watch...在本系列的下一篇文章中，我们将将 TypeScript 代码迁移到 Angular。这种迁移到框架将意味着我们不必处理使用 DOM 的复杂性和重复性。

2.3K20

最流行的4种前端构建项目工具介绍

，用 Sass 或 Less 去取代CSS，用 CoffeeScript 或者 TypeScript 之类的去取代 JavaScript，不过项目中的依赖可能是一件比较烦恼的事情。...历史上已经有很多分享了，比如 Make 可能是很多解决方案中最知名且是可行的方案。Grunt 和 Gulp 是在是前端的世界中最流行的解决方案，他们两个都有很多非常有用的插件。...Gulp 使用了一个文件流的概念。如果你熟悉 Unix，那么 Gulp 对你来说会差不多，Gulp 会提供你一些简单化的操作。...Browserify 解决了这个问题，它提供了一种可以把模块集合到一起的方式。...在接下来的章节中我们会使用 Webpack 来构建项目来展示它的能力。你可以用其他工具和 Webpack 一起使用。

1.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    使用npm+gulp+browserify网页前端开发

    在一定程度上,nodejs的bower插件可以维护AMD类库的依赖，但和requirejs合并共处，我一直没搞明白。 抽时间梳理了一下npm+gulp+browserify的组合，感觉还不错。...构建前是多个js，构建后会把编写的代码js和依赖的类库打包为一个js文件。这样，html中只需要导入一个js文件就可以了。 注：这里没有类加载器的事。 准备环境 从一个裸centos开始。...推荐使用淘宝镜像站的安装包。...这不是本文的目的，如果需要使用多个js类库，还是有很多的。 安装browserify 如果单独使用browserify,应该安装在全局。...gulp自动构建 每一次编辑js都手动调用browserify不现实，我们可以使用gulp进行自动构建。

    1.3K30

    使用Gulp进行JavaScript自动化简易说明书

    在这个JavaScript自动化教程中，你将会学到如何使用 Gulp自动化你的设计和开发流程。如果你更加面向设计，我鼓励你克服你的任何恐惧读下去。...简而言之，Grunt对配置的严重依赖是导致人们走向gulp使用JavaScript的实现方式的主要原因。与此同时，诸如Koala等本地GUI实现取得了一些进展，主要来自于拒绝编码的人。...在本节中，我们将介绍所有的添加和更改。 return gulp.src(['scss/**/*.scss', '!scss/**/_*']) 在这个例子中，Gulp源提供了一个glob数组。...Browserify Browserify分析应用程序中的“require”调用并将其转换为捆绑的JavaScript文件。另外，还有一个可以转换成浏览器代码的npm软件包列表。...Karma Gulp-karma 将臭名昭着的测试环境带到Gulp。Karma遵循Gulp也认可的最小配置方法。 结论 在这个过程自动化教程中，我演示了使用Gulp作为构建工具的优美和简单。

    3.8K10

    浅谈前端工程化的发展以及相关工具介绍

    例如如下图所示就是前端工程化中一次打包的过程，左侧就是我们项目中出现的源文件，例如我们会通 过 sass 这种预处理样式来更好的组织我们的样式代码，使用各类其他语言比如 typescript、coffescript...在编译过程中，JS 比较常⻅的工具是 babel，而其他的语言则对应有自己的编译器，例如 coffeescript 使用 coffeescript 编译器进行编译为 js，typescript 使用 typescript...为了能使任何一个模块都能自由的切换所使用的环境，例如在浏览器使用 CommonJS 封装好的模块， 我们就需要经过打包这个步骤。browserify 、 rollup 等等工具都是处理诸如此类内容。...browserify地址:http://browserify.org/ 我们通过 npm install --save-dev browserify 安装 browserify， 我们写一个简单的 commonJS...gulpgulp 官网 https://gulpjs.com/ 同样的我们使用 npm install --save-dev gulp 安装 gulp 工具， 新建 gulpfile.js 配置。

    78430

    前端工程化发展历史

    毕业前对前端工程化一直没有什么切身的体会，现在工作也有半年多了，体会也越来越深，npm，yarn，Webpack ，gulp，Babel，ESlint，TypeScript 最近准备一一去深入了解一下，...你可以通过 AMD 或者 CommonJS 编写不同的 js 模块，然后可以使用 Browserify 把这些文件打包起来。 听起来很有道理，但是 Browserify 是什么？...对，所以你需要使用一个任务管理器来自动化的运行 Browserify，例如 Grunt、Gulp 或者 Broccoli ，甚至可以使用 Mimosa。 Grunt？Gulp ？...和 Browserify 以及 Webpack 1.x 不同，SystemJS 可以动态加载模块，允许你将不同模块打包成不同文件，而不是打包到一个大文件中。...我会使用 Webpack + SystemJS + Babel 的组合从 TypeScript 转化。 TypeScript？我一直以为是用 javaScript 写代码。

    1.2K20

    从零开始构建你的 Gulp

    代码，也可以增强 CSS 的语法（比如变量和混合宏），还支持未来的 CSS 语法、行内图片等等，而本文所使用到的大部分 CSS 插件，均是来自 PostCSS，关于更多的 PostCSS 的介绍，而通过...，IE8+ postcss-import 使用 @import 合并样式表 cssnano 删除空格和最后一个分号，删除注释，优化字体权重，丢弃重复的样式规则，优化 calc()，压缩选择器，减少手写属性...7 环境下进行测试的，不管你使用的是哪个精灵图生成插件，都必须要安装图片引擎，我们在这里安装的是 sprity-gm 图片引擎，同时还需要下载安装 GraphicsMagick 和 Imagemagick...在 CSS 部分我们使用到了 stylelint 代码审查插件，而在 JS 部分也有类似的代码审查插件 gulp-jshint，需要注意的是，gulp-jshint 和 jshnt 要一起下载安装，其他一些插件也有类似的要求...及内容 contents 两个属性，此外，我们还引入了 bundleLogger.js 和 handleErrors.js 两个文件，处理错误信息及记录绑定的过程，而 browserify-shim

    1.6K40

    2017年前端框架、类库、工具大比拼

    这是一个完整的重写，它引入了使用TypeScript创建的基于模块化组件的模型。Angular 4.0于2017年3月发布。...Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。...任务执行工具之一，但其速度和复杂的JSON配置却导致了Gulp的兴起。...目前大多数人坚持使用Angular 1.0版本，但是长远来讲，如果你愿意学习TypeScript，Angular 4.x版本是个更好的选择。...虽然目前使用Gulp的开发者占大多数，但WebPack却越来越受欢迎。同时你也不能错过ESLint和Mocha等测试工具。 过去的十年，JavaScript经历了革命性的发展。

    3.4K10

    前端模块化方案：前端模块化插件化异步加载方案探索

    上面两个用法不建议同时使用。虽然Require存在各种特殊情况，但是其灵活性和强大性还是支持它成为浏览器端流行的加载器。...更多参看官网：https://requirejs.org/Browserifyhttps://browserify.org/Browserify允许CommonJS格式模块在前端使用，主要用于在浏览器中使用...首先需要node和npm已经安装，获得包：npm install -g –save-dev browserify以CommonaJS格式编写你的模块即可。...虽然我们可以使用  watchify(可以动态把你写的代码立即编译成bundle) 和 --debug 选项(给编译后的代码加上source maps)。但是依然只是近似于直接调试源代码。...早期需要手动在命令行中输入 jshint test.js，而 Grunt 则通过文件 Gruntfile.js 进行配置Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出

    2.2K20

    12条专业的JavaScript规则

    有一打的方式可以做到，而Gulp 和 gulp-uglify 是一种低摩擦和自动化的办法。 4、JS 应该位于页面底部 如果你把 标签放在 中，它会阻碍页面渲染。...5、JS 应该实时的 Linted Linting 遵循代码风格、发现错别字、有助于避免错误。有很多这样的工具，我建议使用 ESLint。你可以使用 Gulp 的 gulp-eslint 来运行它。...JavaScript预计一年发布一次的新版本了，所以你可能一直需要transpiling 。 或者你喜欢强类型？那么你可以考虑 TypeScript。...10、JS应该自动构建 我们已经谈到了 linting、压缩、transpilation 和测试。但如何才能让这一切自动发生？很简单：使用自动构建。Gulp 就是这样一个结合了所有功能的工具。...不过你也可以选择 Grunt 和 Webpack。或者如果你是一个高手，你也可以使用 npm 来构建。问题的关键是，不要指望人记得手动运行这些东西的，自动化是一个非常棒的选择。

    1.1K70

    12条专业的JavaScript规则

    有一打的方式可以做到，而Gulp 和 gulp-uglify 是一种低摩擦和自动化的办法。 4、JS 应该位于页面底部 如果你把 标签放在 中，它会阻碍页面渲染。...5、JS 应该实时的 Linted Linting 遵循代码风格、发现错别字、有助于避免错误。有很多这样的工具，我建议使用 ESLint。你可以使用 Gulp 的 gulp-eslint 来运行它。...JavaScript预计一年发布一次的新版本了，所以你可能一直需要transpiling 。 或者你喜欢强类型？那么你可以考虑 TypeScript。...10、JS应该自动构建 我们已经谈到了 linting、压缩、transpilation 和测试。但如何才能让这一切自动发生？很简单：使用自动构建。Gulp 就是这样一个结合了所有功能的工具。...不过你也可以选择 Grunt 和 Webpack。或者如果你是一个高手，你也可以使用 npm 来构建。问题的关键是，不要指望人记得手动运行这些东西的，自动化是一个非常棒的选择。

    1.3K90

    前端程序员常用的9大构建工具

    2：gulp https://www.gulpjs.com.cn/ gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。...gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有构建场景： 3：browserify http://browserify.org/ Browserify 可以让你使用类似于 node 的...require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。...，以去除那些已被定义但没使用的代码并进行Scope Hoisting(作用域提升)，以减小输出文件的大小和提升运行性能。...rollup的方法和webpack差不多 9：Parcel https://www.parceljs.cn/ 极速零配置Web应用打包工具，Parcel 使用 worker 进程去启用多核编译。

    44410

    【译】在 Webstorm 中使用 ReactJS：编码辅助、代码规范、重构以及编译

    为了增强代码补全的类型参数信息，我们推荐你可以添加一个 TypeScript 类型定义文件 react.d.ts，作为当前项目的 JavaScript 库。...WebStorm 提供了种类繁多的重构方式来修改和维护你的代码。比如，当你使用 Refactor -> Rename 重命名一个文件的时候，所有的引用都会自动被重新命名。...React Getting started 页面上就建议使用 Browserify 或者 Webpack，这些都支持 CommonJS 模块系统。...你也将使用到 Babel，如果使用 Babel 6 和 ES6 代码的话，babel-preset-react 和 babel-preset-es2015 可以用来编译你的代码。...你也可以在 WebStorm 中给 Babel 和 Browserify 装一个文件监听器，用来执行相似命令（你可以阅读这里），但是如果你需要很多步骤的话，通过 npm 脚本或者 Gulp 的方式就可以给你更多的可扩展性

    6.5K10

    前端程序员常用的9大构建工具

    2：gulp https://www.gulpjs.com.cn/ gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。...gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有构建场景： ?...3：browserify http://browserify.org/ Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，...8：Rollup https://www.rollupjs.com/ Rollup是一个和webpack很类似但专注于ES6的模块打包工具，它的亮点在于，能针对ES6源码进行Tree Shaking，以去除那些已被定义但没使用的代码并进行...rollup的方法和webpack差不多 ? 9：Parcel https://www.parceljs.cn/ 极速零配置Web应用打包工具，Parcel 使用 worker 进程去启用多核编译。

    4.2K31

    gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

    常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个，Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。...因此，Gulp 构建 ES6 开发环境的方案有很多，例如：webpack-stream、rollup-stream 、browserify等，本文讲述使用 gulp-better-rollup 的构建过程...rollup 模块和 rollup-plugin-babel（rollup 和 babel 之间的无缝集成插件）： $ npm install --save-dev gulp-better-rollup..."])) 在 src 目录下使用 ES6 语法新建 js 文件，然后运行 gulp 默认任务，检查 dist 下的文件是否编译成功。...("default", gulp.series(["babel", "watch"])) 使用 sourcemaps 和压缩 注意压缩使用 rollup-plugin-uglify 插件，为了提升打包速度

    1.4K20

    图解串一串 webpack 的历史和核心功能

    gulp 只是负责组织任务，自动化执行的工具，本身不做编译、打包等事情。 这个时代也有打包工具，叫做 browserify。...webpack 和 gulp + browserify 的区别，除了编译和打包紧密结合、js 和 css 相互关联外，还有不少： 比如 code spliting、dev server、hot module...回过头来，我们还是在对比 webpack 和之前的 gulp + browserify 的方案。 还用对比么？ webpack 完爆之前的方案。...总结 之前 web 应用并不会做打包，只是对不同资源用不同的编译工具编译下，然后引入 html 里使用。这和 node 里只编译不打包差不多。...我们对比了 gulp + browserify 和 webpack 的功能： 编译和打包融为一体，不再是之前 gulp 的时候编译时编译、打包是打包了。

    49420

    探索CocosH5正确的开发姿势

    是因为早些年使用Lua做过端游服务器和客户端UI，当时对Lua的理解和运用都很肤浅，对项目驾驭能力太差，从而对Lua产生了不好的使用体验。 2....我认识为模块化是编写Cocos H5开发的第一步，我在项目编码中一律采用nodejs代码风格，利用Browserify或Webpack可以将代码完美地运行在浏览器和原生上。...mysql Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务，利用Node.js流的威力，你可以快速构建项目并减少频繁的 IO 操作。...Browserify & Webpack Browserify可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript...有的前端工程直接使用Webpack代替了Browserify和Grunt。

    2.6K20

    Twitter工程师聊JS

    方言 TypeScript 本质上就是JavaScript，带有一套类型系统，因为JS本身无类型，TypeScript变添加了类型，使其更加标准 CoffeeScript 也很接近JavaScript...和 sourcemaps hot reloading 当文件内容变化时，在浏览器中动态更新文件 sourcemaps 使debug更加容易，使bundle回到原始形式 Grunt、gulp、broccoli...、brunch、browserify、webpack 都是JS build工具 他们每个都侧重于解决不同的问题，不好比较 对于新项目，我个人建议使用 webpack，因为他已经被广泛采用，可以处理具有复杂依赖关系的大型应用...JS的测试越来越重要，JS本身没有测试框架，需要依赖外置库 Mocha和Jasmine是两个主流库，你来定义预期行为，然后进行断言 对于运行测试，Mocha提供了命令行工具，而Jasmine没有，很多开发者使用...Karma，他是一个test runner，Mocha和Jasmine的测试都可以使用Karma运行 我个人的建议是 Karma + Jasmine，如果需要用到浏览器测试时，使用PhantomJS

    2K60

    Visual Studio 2015 前端开发工作流

    其一，Gulp 取代 Grunt，基于 Node.js 的前端构建工具发生更迭。 其二，Common JS 规范向前端延伸。...官网不再接受新插件提交，建议用户提交到 NPM，庞大的 jQuery 生态圈转向 NPM； Browserify、Webpack 等前端 Common JS 实现工具流行，并得到 Facebook 等公司认可...； …… Common JS 在前端模块化开发中蔓延的表现远不止这些，相信越来越多的前端开发者会转到 Common JS 规范中来，通过前后端统一模块化规范，实现更多的代码重用，提高开发效率。...Visual Studio 2015 整合了Grunt/Gulp, NPM 和Bower，Gulp 及其丰富的插件、易懂的配置帮助开发者快速地搭建项目构建平台；NPM 结合 Browserify 等工具则解决了模块化...、坑、坑 ASP.NET 5系列教程 (五)：在Visual Studio 2015中使用Grunt、Bower开发Web程序 ASP.NET 5 Starter Web 專案內建的 NPM 設定檔 package.json

    1.8K90
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券