debug node 执行 js 文件，文件名前加--inspect 标志，启用浏览器 nodejs 调试 node调试 点击 devtools 中，左上角的 devices mode 右侧的绿色按钮...、UglifyJS、Grunt、Coffescript、Closure 等等，暂时还不支持 webpack，和其他现代的复杂框架，如 react 所有sources面板的文件，都可以右键选择local...modifications，查看所有更改 对 DOM 树的更改不会持久化至 html 文件：因为 dom 的最终表现，受到 html、css、javascript 的共同影响，DOM 树 !...== HTML，因此可以在 sources 中直接更改 html 文件并保存 Source Map 组合/压缩 css,js 文件是常见的性能优化方案，但是会对开发调试造成困扰 Source Map 用于将生产代码映射至源代码...至生产文件末尾，也可以由服务端在响应头中添加X-SourceMap: /path/to/script.js.map，将 map 文件与生产文件对应。
使用 nodejs 可以非常方便的开发命令行工具，来解决我们遇到的一些问题。...现在就让我们看看如何使用 nodejs 开发一个把 .srt 格式的字幕文件翻译成中文和外语的双语字幕，然后在把它发布到 npm 仓库中。...每句字幕使用两个换行符分隔。 代码编写 我们使用 commander.js 来处理命令行参数。...const ans = await inquirer.prompt([ { type: 'confirm', name: 'dir', message: '翻译当前文件夹下的所有字幕文件...ans.dir) return; 如果是文件夹的话，我们使用 klaw 遍历目录，找到所有 srt 文件。
p=478 一般来讲优化前端，涉及到文件优化的有合并、压缩JS和CSS，以及对图片的优化处理，这篇文章的工具很不错，强烈推荐一下。 整理一下我现在用的命令行工具。各有优缺点，混搭着用。...-8 Closure Compiler 不支持CSS文件压缩 下载：compiler.jar 文档：http://code.google.com/closure/compiler/docs...p=476 支持多个文件合并： java -jar compiler.jar --js myfile-1.js --js myfile-2.js --js_output_file myfile-min.js...（我不建议所有图片全部dataURI转换） 下载：http://github.com/nzakas/cssembed/downloads/ 文档：http://www.nczonline.net.../css文件中的冗余，和没用的图片。
这是因为我们在页面中通过nodejs的require的方式引入的module.js，而使用webpack打包时会自动在依赖关系中引入module.js。.../module.js')); 使用命令行打包： webpack ./entry.js bundle.js --module-bind 'css=style!...使用配置管理 细心的人会发现，我们每次使用命令行打包都带了大量的参数，这样不仅繁琐更不利于规模化使用。webpack同样可以使用标准化配置文件来替代命令行中的各种参数。...webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js。...想要什么就去google找吧。 完善本地开发环境命令 前面的案例使用 webpack-dev-server 来热部署本地开发环境提升开发效率。但是每次都靠长长的命令行启动和停止太过于繁琐。
这是因为我们在页面中通过nodejs的require的方式引入的module.js，而使用webpack打包时会自动在依赖关系中引入module.js。.../module.js')); 使用命令行打包： webpack ./entry.js bundle.js --module-bind 'css=style!...使用配置管理 细心的人会发现，我们每次使用命令行打包都带了大量的参数，这样不仅繁琐更不利于规模化使用。webpack同样可以使用标准化配置文件来替代命令行中的各种参数。 ...webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js。...test后的正则表达式表示对所有的js或者jsx文件进行解析； exclude表示不解析npm安装目录下和bower安装目录下的文件； loader表示使用的解析工具
3.6 Closure Compiler 利用 Closure Compiler[14] 生成 四、如何使用 Source Map 生成 Source Map 之后，一般在浏览器中调试使用，前提是需要开启该功能...sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。 names：转换前的所有变量名和属性名。 mappings：记录位置信息的字符串，下文会介绍。 file：转换后的文件名。...5.1 关于Source map的版本 在2009年 Google 的一篇文章中，在介绍 Cloure Compiler 时， Google 也趁便推出了一款调试东西：Firefox 插件 Closure...第一个源代码文件，即index.js。 源代码的第一行。 源代码第一列 通过以上解析，我们就能知道源代码中 var a = 1; 在打包后文件中，即 bundle.js 的具体位置了。...', // css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串 'css-loader' ]
使用 type demo 可以看到寻找过程 使用 which demo 可以看到寻找结果 文件后缀的作用：毫无作用 你以为一个文件以 .exe 结尾就一定可以双击吗？...和 main.js 都是空文件，如何给他们填充内容呢？...我们在 Bash 命令行里输入 Bash 命令，也可以在 Node.js 命令行里输入 JS 命令（Ctrl + D 退出） Bash 脚本能做的事情，JS...console.log 就相当于 echo 用 JS 脚本创建目录 Google nodejs create dir 文档：https://nodejs.org/api/fs.html#fs_fs_mkdirsync_path_mode...let fs = require("fs") fs.mkdirSync("demo") 用 JS 脚本创建文件 Google nodejs create file 文档： https://nodejs.org
令人惊喜的是，通过ECMAScript标准和Babel，JS已经发展成为一种非常好的编程语言，所有事情都被考虑在内。...一个周末，我将所有内容从Flask-Assets移植到webpack，并使用ES2017功能，以及探索Sass CSS预处理器和一些D3.js示例。让我们从头开始！...同时，NodeJS和V8成为从命令行在开发人员的机器上运行的“标准”JS引擎。...在2008-2012时代，像make这样的特殊工具被用于将JavaScript模块连接在一起，并且通常使用基于Java的工具（如Google的Closure Compiler或UglifyJS）将JavaScript...2012年，Grunt工具作为JavaScript构建工具发布，在NodeJS上编写，可从命令行运行，并可使用JavaScript“Gruntfile”进行配置。
所以本文就主要介绍下我们如何使用Vue结合JS API去开发我们的项目系统。...我们通过vue脚手架来创建了一个基础的vue项目demo，接下来我们通过这个demo来介绍JS API如何跟Vue结合来开发使用。...3.1、在Vue项目中使用JS API时已经不像传统的开发方式那样在index.html中引入JS和CSS文件来使用JS API，而是通过一个叫“esri-loader”的中间件，将我们的JS API和...、接下来我们就在项目根目录下的src文件夹中，通过修改App.vue这个文件夹来介绍如何在Vue中使用JS API开发。...3.9、本文主要是通过实例化一张地图来介绍如何使用JS API开发。
facebook/react facebook 推出的一个前端框架，特点是每个组件的 HTML/JS/CSS 组合在一起，使用 Virtual-DOM 渲染。...golang Google 推出的编程语言。特点是通过 Goroutine 支持高并发。 nodejs 可以在服务器上运行的 js。...通用工具类 hakimel / reveal.js 使用 js 来做 PPT 的一个框架或者说工具 GoogleChrome/puppeteer Google 推出的操作 Chrome 浏览器的 node.js.../android-architecture Google 官方提供的 Android 应用架构例子 sindresorhus/awesome-nodejs Nodejs 资源，awesome 系列，不再赘述...请参考 Nodejs 通用工具类 typicode/json-server 这个其实既是前端工具也是后端工具吧. 根据给定的 json 文件，提供一个模拟接口.
daneden/animate.css CSS 动画效果库 大前端框架和库 vuejs/vue Vue 是国人推出的一个前端框架，可以通过写不同的 Vue 组件来组成一个完整的应用， 支持服务端渲染...golang Google 推出的编程语言。特点是通过 Goroutine 支持高并发。 nodejs 可以在服务器上运行的 js。...通用工具类 hakimel / reveal.js 使用 js 来做 PPT 的一个框架或者说工具 GoogleChrome/puppeteer Google 推出的操作 Chrome 浏览器的 node.js...googlesamples/android-architecture Google 官方提供的 Android 应用架构例子 sindresorhus/awesome-nodejs Nodejs 资源...请参考 Nodejs 通用工具类 typicode/json-server 这个其实既是前端工具也是后端工具吧. 根据给定的 json 文件, 提供一个模拟接口.
初始化项目demo 2.1、在合适的目录下新建文件夹，然后在此文件夹中打开命令行工具，通过以下命令来创建一个基础的React项目demo，如下： npx create-react-app...我们通过react脚手架来创建了一个基础的react项目demo，接下来我们通过这个demo来介绍JS API如何跟React结合来开发使用。...3.1、在React项目中使用JS API时已经不像传统的开发方式那样在index.html中引入JS和CSS文件来使用JS API，而是通过一个叫“esri-loader”的中间件，将我们的JS API...3.5、接下来我们就在项目根目录下的src文件夹中，通过修改App.js这个文件来介绍如何在React中使用JS API开发。...接下来进行JS API的开发。 3.9、本文主要是通过实例化一张地图来介绍如何使用JS API开发。
缩小 在缩小过程中，从CSS和JavaScript文件中删除所有空行、注释和额外空格。这样，文件尺寸大大减小，从而文件加载速度更快。 我们来看看下面这段CSS代码。...大多数开源应用程序，如Magento、Drupal和WordPress，对缩小文件提供了内置支持，或通过第三方插件/模块支持这一功能。...在这里我们不介绍如何在这些应用程序中合并CSS或JavaScript文件了，只讨论一些可以合并CSS和JavaScript文件的工具。 1 Minify Minify是一组完全使用PHP编写的库。...Grunt为使用者提供了命令行，使大家能够运行Grunt命令。...同样地，使用如下代码最小化CSS文件。 grunt cssmin 之后，通过下面这行命令优化JavaScript文件。
我通常使用 Imagemin[7]。它支持多种图像格式，你可以在命令行界面下使用[8]或使用 npm 模块[9]。...这意味着浏览器必须先下载并处理所有 CSS 文件，然后才能绘制像素。通过内联关键的 CSS，可以大大加快此过程。... 9. 使用 Google Fonts Google Fonts 很不错。...如果你不想自己托管字体，那么 Google 字体是一个很不错的选择。但是你应该注意如何实现它们。...如果你只想知道怎样用，可以通过下面的代码段进行 Google 字体集成，但功劳归功于 Harry。
/android-architecture Google 官方提供的 Android 应用架构例子 sindresorhus/awesome-nodejs Nodejs 资源，awesome 系列，不再赘述...blueimp/jQuery-File-Upload jQuery 的文件上传插件 gulpjs/gulp JS 的构建工具，有点类似于 C 语言的 make yarnpkg/yarn Facebook...Ansible 使用 Python 编写。 库 google/guava Google 的 Java 核心库，当想造 Java 的轮子的时候不妨来这里看看是不是已经有了。...请参考 Nodejs 通用工具类 typicode/json-server 这个其实既是前端工具也是后端工具吧. 根据给定的 json 文件，提供一个模拟接口....impress/impress.js 又一个基于前端技术来做幻灯片的工具，不过更加强调 CSS3 的应用，效果更酷炫一些。
googlesamples/android-architecture Google 官方提供的 Android 应用架构例子 sindresorhus/awesome-nodejs Nodejs...blueimp/jQuery-File-Upload jQuery 的文件上传插件 gulpjs/gulp JS 的构建工具, 有点类似于 C 语言的 make yarnpkg/yarn...Ansible 使用 Python 编写. 库 google/guava Google 的 Java 核心库, 当想造 Java 的轮子的时候不妨来这里看看是不是已经有了....请参考 Nodejs 通用工具类 typicode/json-server 这个其实既是前端工具也是后端工具吧. 根据给定的 json 文件, 提供一个模拟接口....impress/impress.js 又一个基于前端技术来做幻灯片的工具, 不过更加强调 CSS3 的应用, 效果更酷炫一些.
Node.js 首页：https://nodejs.org 下载：https://nodejs.org/download Node.js是以Chrome的V8引擎为运行时，基于事件驱动的无阻塞I/O模型...基于 Python 语言的外挂 API -- 针对个别项目使用不同的编辑器设置 -- 通过 JSON 文件自定义设置值 -- 跨平台（Windows、Linux 和 Mac OS X） -- 兼容 TextMate...配置文件 模块安装完成后，在项目根目录创建名为Gruntfile.js的配置文件。...该配置文件是一个node.js的模块，Grunt运行需要该配置文件。...2.3 Gulp运行 1) 运行方式1：Gulp命令行方式执行 项目根目录，执行gulp命令，命令格式：gulp ，未指定任务名，执行所有任务。
(2) 安装node的目的是为了测试npm （npm是nodeJS的包管理工具 全 称：nodeJS Package Manager） 使用npm的原因： a.如果一个项目中使用的第三方js代码非常多...b.所以Npm把所有第三方js库收集在一起，放在npm的服务器上，这样，程序员每次下载时，统一从npm下载。而且，npm还可以管理js之间的依赖关系。一个包就是一个js库。...，在合并后进行压缩，在合并的文件common.js若再次更改，则继续压缩 执行.pipe(uglify()） 随后在cmd命令行输入 gulp watchall 进行监听 ⑤ 重命名（js文件） 使用...命令行输入** gulp watchall ⑥ 压缩css 使用Gulp-minify-css 插件 在cmd命令行中输入 npm install gulp-minify-css –save-dev...css压缩文件。
通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、JavaScript、CSS的开发效率。...以下为压缩css的任务的配置文件 Gulp API的使用方法详见：http://www.gulpjs.com.cn/docs/api。...2.3 Gulp运行 1) 运行方式1：Gulp命令行方式执行 项目根目录，执行gulp命令，命令格式：gulp ，未指定任务名，执行所有任务。...目前所有的JQuery代码都使用QUnit进行测试，原生的JavaScript也可以使用QUnit。...1) 单元测试脚本示例 nodeunitcase.js 2) 命令行界面执行测试 在项目根目录下运行命令： 3) 测试结果 1.3 NodeJS自带测试模块Assert API首页：https
1.安装 node及 npm 从node.js中文网下载并安装nodejs点击下载 .msi的32/64位安装包，然后双击本地文件一路点击 下一步完成 nodeJs的安装即可。...这是因为 npm在安装 nodeJs的时候顺带已经装好了。 2.安装 webpack 注：以下所有 npm操作，由于国内速度较慢甚至出现失败，可用淘宝镜像 cnpm替代。...所有命令均可用 cnpm替代。如不需要可直接跳过。 1.sacc/scss 用途：可用 sass/scss进行css书写代码。...(或js)里面，每个css文件和js文件下有一个同名的 .map文件，非常占空间，那它是做什么的呢？...如何解决 那么该如何处理这些文件呢？进入 项目/config/index.js，定位到 productionSourceMap，将其值改为 false即可。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
