babel

参考：rollup中文网 rollup功能单一，webpack功能强大 工具要尽量功能单一，可集成，可扩展 npm init npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core --save-dev 配置.babelrc { "presets" : [ [ "latest" , { "es2015" : { "modules" : false } } ] ] , "plugins" : [ "external-helpers" ] } 配置rollup.config.js import babel from "rollup-plugin-babel" import resolve from "rollup-plugin-node-resolve" export default { entry : 'src/index.js' , format : 'umd' , // 兼容性设置，可适用js，es6，AMD等语法 plugins : [ resolve ( ) , babel ( { exclude : 'node_modules/**' } ) ] , dest : 'build/bundle

对babel进行复习😂😂😂 Babel Register 第一：在项目根目录下创建一个 .babelrc 文件，写入以下内容： { "presets": [ ] } 第二：安装对应的转码规则： # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3 第三：将 .babelrc 文件中修改为以下内容： { "presets": [ "es2015" ] } 第四步（从第四步开始，前三部必不可少）： babel-cli：命令行转码 babel-node：babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境 babel-register：实时转码

虽然现在es6已经很完善了，但也仅仅限于一些高级浏览器 如:谷歌 ,火狐,ie11等等 babel 可以实现高版本js往低版本转换 使用方式 有俩种 1.使用cdn方式 引入 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 使用的时候 <script type="text/babel"> </script > 加上 type="text/babel" 这句话 2.使用npm安装使用(前提的本地电脑上有 node.js最新版环境) 2.1.桌面上建立一个空的文件夹 npm init 初始化项目文件 2.2.安装所需要的依赖 npm i @babel/core @babel/cli @babel/preset-env babel/core 转换代码 babel/cli 执行的命令环境 babel/preset-env 配置环境 2.3.在packjson 文件夹中书写配置 (提前把需要转换的代码放到src目录下 当然这个目录可以自定义的) "build":"babel src -d dest" //src 要转换的 代码文件存放目录 -d dest 输出的文件目录 2.4.在当前目录下 新建立一个配置文件 .babelrc 别忘了前面小点 不配置这个 默认是不会转换低版本 他根据环境判断

前言 一直在用webpack，下面总结一下 入门(一起来用这些小例子让你熟悉webpack的配置) 1.1 初始化项目 新建一个目录，初始化npm npm init webpack是运行在node环境中的,我们需要安装以下两个npm包 npm i - D webpack webpack - cli npm i -D 为npm install --save-dev的缩写 npm i -S 为npm install --save的缩写 新建一个文件夹src ,然后新建一个文件main.js,写一点代码测试一下 console . log ( 'call me nanshen' ) 配置package.json命令 执行 npm run build 此时如果生成了一个dist文件夹，并且内部含有main.js说明已经打包成功了 1.2 开始我们自己的配置 上面一个简单的例子只是webpack自己默认的配置，下面我们要实现更加丰富的自定义配置 新建一个build文件夹,里面新建一个 webpack.config.js // webpack.config.js const path = require ( 'path' ) ; module . exports = { mode : 'development' , // 开发模式 entry : path . resolve ( _

压缩css、js文件 yarn add optimize-css-assets-webpack-plugin -d npm run build//看效果 ES6转换ES5 yarn add babel-loader @babel/core @babel/preset-env -d 添加： 使用class等报错 终端执行： yarn add @babel/plugin-proposal-class-properties 使用属性装饰器 例如：@log npm install --save-dev babel-plugin-transform-decorators-legacy 来源： CSDN 作者： 迷阵 链接： https://blog.csdn.net/weixin_43047070/article/details/104047473

直接在public文件夹下的Index.html头部引入polyfill.min.js <script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script> 也可在main.js中导入babel-polyfill axios 兼容处理 npm install es6-promise --save import 'es6-promise/auto' 已通过测试，没有任何问题 来源： CSDN 作者： zhangxugang_script 链接： https://blog.csdn.net/tstmeng/article/details/103976245

babel：将浏览器不支持的ES6语法转为javascript 查看node是否安装： npm -v node -v 实例演示： 在桌面新建part5目录 在cmd命令行中 cd desktop cd part5 安装babel： 初始化package.json文件：描述当前项目信息，包括依赖等 npm init 安装babel cli npm install --save-dev babel-cli 在package.json的"script"下添加一句： "build": "babel entry.js" 创建entry.js文件，写es6代码用于测试 执行 npm run build 全局安装babel-cli npm i babel-cli -g 安装babel-preset-env npm i -D babel-preset-env 创建配置文件，告诉babel用什么规则来编译文件.babelrc { "presets": [ [ "env", { "targets":{ "browsers":["last 1 version"] } } ] ] } 修改packsge.json -o 输出到文件 -w 始终处于监听状态 "build": "babel entry.js -o index.js -w" 通过babel插件体验新特性 安装插件 npm i -D babel