babel

树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨ 前沿：按需加载是性能优化其中的一个环节，可以是图片的按需加载，也就是lazyload来实现按需加载的场景,也可以是组件库的引入，只需部分组件的使用而无需全局引入整个组件库的场景，又可以是路由的按需加载，当路由被访问的时候才加载对应组件的场景，以此来实现更高效率的使用等等，本文把“懒加载”也划分为按需加载 1.图片按需加载 场景：当一个页面存在需要多个图片加载的场景时，可以通过我们经常看到的所谓“懒加载”，当滑动到图片相应的位置时再加载图片的信息，以此来实现按需加载，举个最简单的例子，你去逛淘宝的时候，电商网站图片信息是很多的，这个时候如果把当前页面下的图片都将资源请求过来，是很消耗资源的，对网站的体验也是极其不好，只需要加载你当前“视线”下的图片即可，vue技术栈中 vue-lazyload 即可实现，下面聊聊它的使用和原理 1.1 vue-lazyload是什么 本质上懒加载就是，在适当的时候加载用户需要看的资源（可视区域），当页面开发时将src路径先预先设置好属性，这样页面加载时图片就不会马上向服务器请求资源，而是当图片滚动到可视区内时，再给src赋值并加载资源，而 vue-lazyload 就是基于这个概念实现的一个vue的工具库，官方介绍：A Vue.js

本文相关代码地址： github 效果展示： react-demo 项目创建 创建项目文件夹 mkdir react-demo cd react-demo npm init -y 复制代码 依赖安装 yarn add react react-dom yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env file-loader jsx-loader css-loader style-loader url-loader less less-loader --dev 复制代码 webpack 配置 区分开发环境 development 和生产环境 production 配置 分别创建对应的 配置文件 antd-mobile 按需加载 安装插件 yarn add babel-plugin-import -D 复制代码 修改 babel.config.js 配置 module .exports = { presets : [ "@babel/preset-env" , "@babel/preset-react" ]

一 引言 Webpack 最初是为了解决前端模块化以及使用 Node.Js 生态的问题而出现，在过去的 8 年时间里，Webpack 的能力越来越强大。 但因为多了打包构建这一层，随着项目的增长，打包构建速度越来越慢，每次启动都要等待几十秒甚至几分钟，然后启动一轮构建优化，随着项目的进一步增大，构建速度又会降低，陷入不断优化的循环。 在项目达到一定的规模时，基于 Bundle 的构建优化的收益变得越来越有限，无法实现质的提升。我们从另一个角度思考，webpack 之所以慢，主要的原因还是在于他将各个资源打包整合在一起形成 bundle，如果我们不需要 bundle 打包的过程，直接让浏览器去加载对应的资源，我们将有可能可以跳出这个循环，实现质的提升。 在 Bundleless 的架构下，我们不再需要构建一个完整的 bundle，同时在修改文件时，浏览器也只需要重新加载单个文件即可。由于没有了构建这一层我们将能够实现以下的目标： 极快的本地启动速度，只需要启动本地服务。 极快的代码编译速度，每次只需要处理单个文件。 项目开发构建的时间复杂度始终为 O(1)，使得项目能够持续保持高效的构建。 更加简单的调试体验，不再强依赖 sourcemaps 即可实现稳定的单文件的 debug。 基于以上的可能性 Bundleless 将重新定义前端的本地开发，让我们重新找回前端在 10

编译 也可以使用 -Os 优化, 兼顾性能和大小 emcc -O3 \ -s WASM=1 \ -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap","ccall"]' \ -s EXPORTED_FUNCTIONS='["_main","_fibArray","_fib"]' \ -s ALLOW_MEMORY_GROWTH \ -s ENVIRONMENT='web' \ -s EXPORT_ES6=1 \ -s MODULARIZE=1 \ -s STRICT=1 \ -o fibArray.js \ --bind \ fibArray.cpp webpack.config 如果需要使用 import.meta的话, 那么需要使用loader转码, 否则会报错 @open-wc/webpack-import-meta-loader babel也有相应的插件 { test: /\.wasm$/, type: "javascript/auto", use: { loader: "url-loader", options: { limit: 8192, name: "[name].[ext]" }, }, }, node: { fs: "empty", // ← !! __dirname: false, Buffer: false, process

es6语法通过babel转码为es5普通语法的配置 在一个空文件夹里初始化 安装 添加配置：根目录添加个特殊格式文件 .babelrc 没有后缀，必须这格式的文件 添加脚本：根目录packge.json文件中添加 如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过 在一个空文件夹里初始化 npm init - y 安装 npm install -- save - dev @babel / core @babel / cli @babel / preset - env @babel / plugin - transform - arrow - functions npm install -- save @babel / polyfill 添加配置：根目录添加个特殊格式文件 .babelrc 没有后缀，必须这格式的文件 { "presets" : [ "@babel/preset-env" ] } 添加脚本：根目录packge.json文件中添加 /*src 当前js文件 lib打包js文件*/ "build" : "./node_modules/.bin/babel src -d --out-dir lib" ##运行打包 npm run build 这样就可以转换了! 来源： oschina 链接： https://my.oschina.net/u/4323212

"devDependencies" : { 　　 "antd": "^3.1.4" , 　　 "babel-plugin-import": "~1.1.0" , 　　 "classnames": "2.2.5" , 　　 "qs": "^6.3.0" , 　　 "robe-ajax": "^1.0.1" , 　　 "expect": "^1.20.2" , 　　 "js-cookie": "^2.1.3" , } 指定版本号 (1)普通版本号: 表示安装此版本, 比如"classnames": "2.2.5"，表示安装2.2.5的版本 (2)表示安装大版本的最小最新子版本: ~版本 ,比如 "babel-plugin-import": "~1.1.0",表示安装1.1.x的最新版本（不低于1.1.0），但是不安装1.2.x，也就是说安装时不改变大版本号和次要版本号 (3)表示安装大版本的最高中版本: ^版本 ,比如 "antd": "^3.1.4",，表示安装3.1.4及以上的版本，但是不安装4.0.0，也就是说安装时不改变大版本号。 来源： oschina 链接： https://my.oschina.net/u/4357381/blog/4316407

写在前面 无论是 Vue 还是 React，都有组件的概念。组件，顾名思义就是能和别人组合在一起的物件。在前端页面开发过程中，将一个页面划分成一个个小的模块，每个模块单独定义，每个模块就是一个组件。组件还可以进行复用，A 页面和 B 页面有一个相似的模块，可以抽离成一个可局部修改的组件。 组件化的概念让前端页面开发有了更清晰的结构。 Vue 中的组件就是一个 Vue 的实例对象。因此，Vue 组件的构造选项和 new Vue() 方法构造 Vue 实例的构造选项是一样的，其可接收的构造选项都是一样的。除了 el 这样 根实例 特有的选项。但是，Vue 组件必须得是可以复用的，因此，就必须要求构造选项中的 data 选项必须是一个函数，该函数返回一个对象。 为什么 data 选项是个返回对象的函数就可以保证组件的可复用性呢？ 因为无论是 new Vue() 的方式还是定义 Vue组件 的方式创建一个 Vue 实例，其执行的操作都是将构造选项中的各属性值直接赋值给新创建的 Vue 实例对象。组件复用就是 Vue 使用 相同的构造选项 构造出多个同名不同地址的 Vue 实例对象。如果 Vue 组件定义时的构造选项中的 data 选项是一个对象，那么在组件复用时，多个组件就会共用一个 data 数据对象，因为是直接将 data 对象的地址赋值给组件的 Vue 实例的。但如果组件定义时的

1.安装插件 yarn add @babel/core babel-loader @babel/preset-env -D @babel/core 是的核心模块 babel-loader 来编译js代码 @babel/preset-env 用来转化es 　　 2.webpack.config.js 添加配置 const HtmlWebpackPlugin = require( ' html-webpack-plugin ' ); const { CleanWebpackPlugin } = require( ' clean-webpack-plugin ' ); const webpack = require( ' webpack ' ); // 访问内置的插件 const path = require( ' path ' ); let htmlPlugin = [ ' index ' , ' other ' ].map(chunkName => { return new HtmlWebpackPlugin({ template: `. /src/ ${chunkName}.html`, hash: true , filename: `${chunkName}.html`, chunks: [chunkName] }) }) console.log(htmlPlugin)

按需引入 借助 babel-plugin-component ，引入我们需要的组件，减少项目体积 npm install babel - plugin - component - D 修改 babel.config.js 的内容 //babel.config.js 全文内容如下 module . exports = { presets : [ '@vue/cli-plugin-babel/preset' ] , plugins : [ [ 'component' , { libraryName : 'element-ui' , styleLibraryName : 'theme-chalk' } ] ] } 3.创建文件 element.js(名字自定义) // element.js 全文内容如下，按自己需要引入就好了 import Vue from 'vue' import { Button , Form , FormItem , Input , Message , Container , Header , Aside , Main , Menu , Submenu , MenuItem , Breadcrumb , BreadcrumbItem , Card , Row , Col , Table , TableColumn , Switch , Tooltip ,

Nuxt 使用 create-nuxt-app 创建项目时，选择使用 Element-UI 为默认组件库，发现 Nuxt 没有开启 Element-UI 的按需引入配置，需要自行配置。 安装依赖 在 create-nuxt-app 中没有选择 Element-UI 的先安装。 npm install element-ui --save 或者 yarn add element-ui Element-UI 开启按需引入，必须安装 babel-plugin-component 插件。 npm install babel-plugin-component --save-dev 或者 yarn add babel-plugin-component 安装完成后，在文件根目录创建(或已经存在) plugins/ 目录下创建相应的插件文件，创建名为：element-ui.js 的文件。 // element-ui.js import Vue from 'vue' import { Container, Header, Aside, Main, Menu, MenuItem, Button, Form, FormItem, Input } from 'element-ui' import locale from 'element-ui/lib/locale/lang/en' const