babel

这次老板新接了一个四点半官网页面，使用vue来写。emm……我感觉整个人都不好了，两天半解决了20个静态页面。还好vue写页面简直飞快，遇到一个vue的新坑，使用百度地图。 研究了好一会，总是报错BMap is not defined 我只有一个页面需要用到地图，所以我是使用cdn引入的方式来写的，并没有像网上一些教程一样使用npm引入安装。 直接简单粗暴的根据百度地图api来写，虽然报错。那就解决报错的bug就行了。好了，下面开始说说步骤 在需要页面的处引入cdn： < script type ="text/javascript" src ="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" ></ script > 我的是在 </ template > 标签结尾后引用的 在webpack配置里module.exports中加个externals： module.exports = { context: path.resolve(__dirname, '../'), entry: { // app: './src/main.js' app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE }, externals: { "BMap": "BMap" }, } 此处依旧报错

深入学习rollup来进行打包 阅读目录 一：什么是Rollup? 二：如何使用Rollup来处理并打包JS文件？ 三：设置Babel来使旧浏览器也支持ES6的代码 四：添加一个debug包来记录日志 五：添加插件来替代环境变量 六：添加 UglifyJS来压缩我们js的代码 七：监听文件变化的插件 --- rollup-watch 八：开启本地服务的插件 --- rollup-plugin-serve 九：实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运行watcher 和 Livereload的工具 十一. rollup+PostCSS打包样式文件并添加 LiveReload 回到顶部 一：什么是Rollup? rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时，它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下 ： 1. 能组合我们的脚本文件。 2. 移除未使用的代码(仅仅使用ES6语法中)。 3. 在浏览器中支持使用 Node modules。 4. 压缩文件代码使文件大小尽可能最小化。 Rollup最主要的优点是 它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率

Vue CLI3--运行单个 *.vue 文件 1. 安装全局扩展 npm install -g @vue/cli-service-global 2. 运行.vue文件 vue serve 文件夹名 注意: 如果已经安装过可以直接运行 vue serve 文件夹 运行时, 会自动生成一个 node_modules 文件夹 Vue官方api JSON.parse(JSON.stringify(row)) JSON.parse('要转换的数据') JSON.stringify('要转化的数据') 俩个方法的用法差别: ①.JSON.stringify是从一个对象中解析出字符串 ②.JSON.parse是从一个字符串中解析出json(键值对) 主要用来解决: 　　俩个地方同时调用一个数据 (v-model) 产生的变化 ( 相当于深拷贝 ) 数据可视化 D3.js 想要修改vue项目自动开启浏览器 在config下的 index.js里的 module.exprots里的 dev项 修改 module.exports = { dev: { host: 'localhost', // 可以被process.env.HOST覆盖 port: 3000, // 配置端口号 默认8080 autoOpenBrowser: true, // 是否自动打开浏览器 errorOverlay: true

前言 对于现在的前端项目而言，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要10分钟，甚至更多，慢如蜗牛。特别是线上热修复时，分秒必争，响应速度直接影响了用户体验，用户不会有耐心等那么长时间，让你慢慢编译；如果涉及到支付操作，产品损失更是以秒计，每提前哪怕一秒钟发布，在腾讯海量用户面前，都能挽回不小的损失。不仅如此，编译效率的提升，带来的最直观收益就是，开发效率与开发体验双重提升。 那么，到底是什么拖慢了webpack打包效率，我们又能做哪些提升呢？ webpack 是目前非常受欢迎的打包工具，截止6天前，webpack4 已更新至 4.28.3 版本，10 个月的时间，小版本更新达几十次之多，可见社区之繁荣。 webpack4 发布时，官方也曾表示，其编译速度提升了 60% ~ 98%。 天下武功，唯快不破 由于本地项目升级到 webpack4 有几个月了，为了获得测试数据，手动将 webpack 降级为 3.12.0 版本，其它配置基本不做改动。 测试时，Mac仅运行常用的IM、邮箱、终端、浏览器等，为了尽可能避免插件对数据的影响，我关闭了一些优化插件，只保留常用的loader、js压缩插件。 以下是分别在 webpack@3.12.0 及 webpack@4.26.1 两种场景下各测 5 次的运行截图。 数据分析如下（单位ms）： 第1次 第2次 第3次

阿里妹导读： Webpack 将各个资源打包整合在一起形成 bundle，当资源越来越多时，打包的过程也将越来越慢。如果我们不需要打包呢？让浏览器 直 接 加载对应的资源，是否就可以实现质的提升 ？ 本文分享基于浏览器的 ESModule 能力实现 Bundless 本地开发的相关思路、核心技术点和 Vite 的相关实现，以及在阿里供应链 POS 场景下的落地实践。 文末福利：前端开发学习路线。 一 引言 Webpack 最初是为了解决前端模块化以及使用 Node.Js 生态的问题而出现，在过去的 8 年时间里，Webpack 的能力越来越强大。 但因为多了打包构建这一层，随着项目的增长，打包构建速度越来越慢，每次启动都要等待几十秒甚至几分钟，然后启动一轮构建优化，随着项目的进一步增大，构建速度又会降低，陷入不断优化的循环。 在项目达到一定的规模时，基于 Bundle 的构建优化的收益变得越来越有限，无法实现质的提升。我们从另一个角度思考，webpack 之所以慢，主要的原因还是在于他将各个资源打包整合在一起形成 bundle，如果我们不需要 bundle 打包的过程，直接让浏览器去加载对应的资源，我们将有可能可以跳出这个循环，实现质的提升。 在 Bundleless 的架构下，我们不再需要构建一个完整的 bundle，同时在修改文件时，浏览器也只需要重新加载单个文件即可

单文件组件介绍 vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立的组件，所以成为单文件组件； vue文件结构 由于.vue封装了html、js、css的代码，所以它由以下几部分组成； <template> html </template> <script> js </script> <style> css </style> vue-loader： 如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 vue-loader； 同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css-loader… vue-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack； webpack： javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包； 官网： 点击前往 单文件组件项目结构与依赖安装 创建项目结构 基于webpack的单文件组件项目基本结构 1、index.html 基本页面 2、App.vue vue根组件 3、 main.js 入口文件 4、package.json 项目配置文件 5、webpack.config.js webpack配置文件 6、 .babelrc

// 每日前端夜话 第466篇 // 正文共：3800 字 // 预计阅读时间：12 分钟 拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。 在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具，使用户可以从头到尾直观地管理项目。Trello、Pivotal Tracker 和 Jira 等工具都属于看板应用。 设置看板 运行以下命令创建我们的看板项目： vue create kanban-board 在创建项目时，该选择只包含 Babel 和 ESlint 的默认预设。 完成后，删除默认组件 HelloWorld ，将 App 组件修改为空，仅包含裸组件模板： < template > < div > </ div > </ template > < script > export default { name : 'App' , components : {}, }; </ script > < style > </ style > 接下来用 Bootstrap 进行样式设置，只需 Bootstrap CSS CDN 就够了。将其添加到 public/index.html 的 head 重。 < head > < meta charset = "utf-8" > < meta http

最近客户端那边需要搞了个h5嵌入app，想想是移动端的webview，前端这边也比较忙。就没想太多，直接用了async/await处理api数据，于是就不怪测试就来搞事情了... 一、error： 1、 先测试了一款魅族的手机，发现运行页面后报错如上，即提示“let、const等块级作用域还不支持在严格模式以外使用”，另外更全面的了解下该款webview特性，用阮一峰前辈的检测工具检测了下（如下图） 还不错，支持了90%的特性，和最新款的谷歌特性保持不相上下。于是乎就又草率的加了个严格模式申明（'use strict'）就完事了 ！！！ 2、“Uncaught SyntaxError: Unexpected identifier” 第二次测试er拿来一款几百年前的小米手机，具体啥型号的都懒得看了，总是很老很老，报错如上，于是同样用上面的检测插件检测了下该webview对es6的支持程度，结果不出意外，支持度是7%，连检测插件的ui都不兼容。如下图所示。 二、methods of kill error： 1、 通过es6-polyfill弥补浏览器缺失的es6特性 // 损耗性能，暂不考虑 2、回归es2015 3、compile by babel 在发布前使用label等转译工具将code转换成当前浏览器支持的语法。 ps：慎重，切勿因为忙碌给自己留坑，因为留下的坑一定是要重新填的

这个笔记是自己在慕课网上学习《从零开始做一个开源项目》记录的笔记体，里面记录了老师讲的东西，以及做了些自己操作过程中出错的记录，整理到博客园方便日后自己和其他需要的小伙伴查找相干知识点 一、github如何注册账号 二、 添加 ssh key 这个是为了利用GitHub服务器来使用的， ssh key 就是连接你的电脑和 github 服务器的一把钥匙，只有添加成功了才能把你本地的代码提交到 github 服务器 有关mac os系统安装ssh key 的说明如下图： 有关windows安装可以参考下面的链接： https://blog.csdn.net/MissXy_/article/details/79901949 在第三步中打开 .ssh 文件中的 id_rsa.pub 中的密钥复制下来 粘贴上到 key 中就可以了 测试ssh keys是否设置成功。可以在命令行或者git bash中执行一下命令 $ ssh -T git@github.com 三、开发环境初始化 上边的yes那里直接yes就可以了。 根据你写的东西则会初始化一个 JSON 文件这时你的目录下会多了个 package.json 的文件 四、webpack安装依赖及插件（利用淘宝镜像安装） npm i babel-core babel-loader babel-polyfill babel-preset

好久之前搭建的一个react执行环境，受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境，新项目准备用webpack4重新弄弄了，旧的记录就合并发布了(在没有快速目录的地方写的，之前是分为了10个文件) 所使用的一些包可能进过不断的迭代升级已不支持 01.初始化项目(安装需要的包) //生成package.json npm init 安装基础包 npm install react react-dom --save npm install webpack@3.10.0 webpack-dev-server@2.7.1 --save-dev <!--webpack和webpack-dev-server同时全局安装一下--> npm install webpack@3.10.0 wepack-dev-server@2.7.1 -g webpack-dev-server@2.7.3是最后兼容ie9的版本，升级之后会导致打包的文件在ie9下运行报错 安装和配置babel npm install babel-core 核心功能 babel-loader babel-polyfill 转换低版本代码 babel-preset-env 解析Es6 babel-preset-react 解析JSX --save-dev 安装loader包 npm