babel

Babel 是一个通用的多功能 JavaScript 编译器，但与一般编译器不同的是它只是把同种语言的高版本规则转换为低版本规则，而不是输出另一种低级机器可识别的代码，并且在依赖不同的拓展插件下可用于不同形式的静态分析。（静态分析：指在不需要执行代码的前提下对代码进行分析以及相应处理的一个过程，主要应用于语法检查、编译、代码高亮、代码转换、优化、压缩等等） 安装babel //打开终端，输入命令 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node //安装完毕之后，再次输入命令安装 npm install --save @babel/polyfill 创建babel.config.js const presets = [ ["@babel/env",{ targets:{ //最低支持的浏览器版本 edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] export导出/暴露 //export default默认导出，即外部JS文件import（引入）后可以使用的属性 // export default只能到处一次 export default { //属性 a, //方法 show } //按需要暴露（导出）

我对JavaScript的本机 Array.forEach 实现有疑问：它是否异步运行？ 例如，如果我打电话： [many many elements].forEach(function () {lots of work to do}) 这将是非阻塞的吗？ #1楼 这是一个简短的异步函数，无需第三方库即可使用 Array.prototype.each = function (iterator, callback) { var iterate = function () { pointer++; if (pointer >= this.length) { callback(); return; } iterator.call(iterator, this[pointer], iterate, pointer); }.bind(this), pointer = -1; iterate(this); }; #2楼 编辑2018-10-11：看起来下面描述的标准很有可能无法通过，可以考虑使用 流水线 作为替代方法（表现不完全相同，但是方法可以在类似的庄园中实现）。 这就是为什么我对es7感到兴奋的原因，将来您将能够执行类似以下代码的操作（某些规格不完整，因此请谨慎使用，我会尽量保持最新状态）。 但是基本上使用新的:: bind运算符，您将能够在对象上运行方法，就像对象的原型包含该方法一样。

1、Auto Rename Tag ——自动重命名成对的HTML标记。假如你创建了一个<p>标记。现在你想更改它。有了这个软件，你只需要更改一个就行，另一个会自动修改。从理论上来说，使用这个软件可以把你的工作效率提升一倍。 2、HTML CSS Support ——HTML文档的CSS支持工具。该工具在获得一些简洁的语法高亮显示和代码建议方面非常有用。 3、HTML Snippets ——这一工具在代码分段方面非常有用，可以为你节省大量的时间。它能跟Emmet配对，这样一来你甚至都不用再真正键入HTML了。 4、Babel ES6/ES7 ——JavaScript Babel的辅助工具。如果你用的是Babel，这个工具可以让你更容易区分代码。如果你喜欢JavaScript，那务必也不要错过这款软件。 5、Bracket Pair Colorizer ——色彩可视化工具。如果你没有准确地括号，那这个工具对于发现因此导致的许多常见漏洞十分方便。 6、ESLint ——你在编写代码的时候，利用这个软件可以轻易获取有关漏洞的提示，而且在编码过程中，它还可以帮助你养成良好的编码习惯。 7、Guides ——这一工具可以被用来添加额外的指导行代码。这是另一个视觉提示，以确保你正确地括号了。 8、JavaScript Console Utils ——使控制台日志记录变得更为简单可行

webpack+vue 下面结合一个简单的 vue 实例讲解 webpack 和 vue 的结合使用： 1 package.json { "name" : "webpack_vue" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" , "dev" : "webpack" , "server" : "webpack-dev-server" } , "keywords" : [ ] , "author" : "" , "license" : "ISC" , "devDependencies" : { "@babel/core" : "^7.8.4" , "@babel/plugin-transform-runtime" : "^7.8.3" , "babel-loader" : "^8.0.6" , "css-loader" : "^3.4.2" , "file-loader" : "^5.1.0" , "style-loader" : "^1.1.3" , "url-loader" : "^3.0.0" , "webpack" : "^4.41.6" ,

前端的工程化和自动化 grunt gulp browserify webpack 当今主流 webpack vue react angular 当前市面 2 个版本 webpack 3.0 webpack 4.0 一、webpack 基础认识 官网地址 官网: https://webpack.js.org/ 中文: https://www.webpackjs.com/ 前身: browserify 缺点，只能转化js webpack作用? 项目管理、打包、模块管理(依赖问题)、加载资源(js/css/html/png../woff/data/vue...),转换器(loader) 前身：grunt/gulp/browserify->webpack->pratcle webpack的历史 webpack1支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。 webpack2 支持ES Module，分析ESModule之间的依赖关系，webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking webpack3 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment； 前端的模块化 AMD : require.js CMD : sea.js( 弃用了 )

webpack4.0优化那些事儿 一 缩小文件搜索范围 1 include & exclude 1) action 限制编译范围 2) useage module: { rules: [ { test: /\.js$/, use: ['babel-loader?cacheDirectory'], include: path.resolve(__dirname, 'src'), exclude: /node_modules/ } ] } 'babel-loader?cacheDirectory' You can also speed up babel-loader by as much as 2x by using the cacheDirectory option. This will cache transformations to the filesystem. QA 命令行warning [BABEL] Note: The code generator has deoptimised the styling of "/Users/xxx/Documents/xxx/webpack_test/test3/node_modules/lodash/lodash.js" as it exceeds the max of "500KB". 加上exclude限制范围就不会报错了 2

一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI ： @vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务 ： @vue/cli-service 是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如： serve 、 build 和 inspect 命令） CLI 插件 ：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等） 二、安装 1、全局安装过旧版本的 vue-cli (1.x 或 2.x)要先卸载它，否则跳过此步： 1 npm uninstall vue-cli -g // 或 yarn global remove vue-cli 　 2、Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0）。 下载安装nodeJs， 中文官方 下载地址： http://nodejs.cn/download/ 3、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli ） 1 cnpm install -g @vue/cli //yarn global

插件的使用 　　自己组合插件 　　使用预设的插件 官方 Preset ---> 一些常用环境编写的 preset （社区维护的，通过npm下载） 　　@babel/preset-env 　　@babel/preset-flow 　　@babel/preset-react 　　@babel/preset-typescript 创建自己的 presets 　　创建一个自己的 preset，只需导出一份配置即可。 　　可以是一份插件数组： 　　 module.exports = function( ) { 　　　　 return { 　　　　　　 plugins: [ "pluginA", "pluginB", "pluginC", ] 　　　　}; 　 } 　　preset 可以包含其他的 preset，以及带有参数的插件。 　　 module.exports = () => ({ presets: [ require( "@babel/preset-env"), ], plugins: [ [ require( "@babel/plugin-proposal-class-properties"), { loose: true }], require( "@babel/plugin-proposal-object-rest-spread"), ], }); Preset 路径 　

1.console.log，console.info和console.error常见 2.alert，阻塞，少用，有点out 3.在代码中加入debugger，后面要记得移除 onClick:function () { debugger // 直接使用debugger打断点 this.msg = 'change' console.log('this is console.log',this.msg) } 4.在 config/index.js 文件中更改 devtool 配置为 source-map ， 详细可参考 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html module.exports = { devtool: 'source-map',//默认是：cheap-module-eval-source-map } 设置为 source-map ，则可以生成 .map 文件，在chrome浏览器中调试的时候可以显示源代码,效果如下: cheap-module-eval-source-map 选项效果： webpack中 devtool 的其它选项各代表什么呢： 参考 // https://webpack.js.org/configuration/devtool/#development eval

Babel是一个编译器，编译过程分为三个阶段：解析、转换 和 打印输出。 如果想要 Babel 做一些实际的工作，就需要为其添加插件 或者 以 preset 的形式启用一组插件； 启用单个插件 转换插件： 用于转化你的代码 　　　　　转化插件将启用相应的语法插件 （不必同时指定这两种插件） 　　　用法： 参考 https://www.babeljs.cn/docs/babel-plugin-transform-exponentiation-operator 　　　　　　安装： npm install --save-dev @babel/plugin-transform-exponentiation-operator 　　　　　　配置文件（建议）： { "plugins": [ "@babel/plugin-transform-exponentiation-operator"] } 　　　　　　Via CLI（通过CLI）： babel --plugins @babel/plugin-transform-exponentiation-operator script.js　　　　 　　　　　　Via Node API： require( "@babel/core").transform( "code", { plugins: [ "@babel/plugin-transform