babel的打包方式

标签：set   nsf   function   firefox   执行   npm   插件   直接   code   

1. 打包javascript

　　1） 安装所需的包

　　　　npm install --save-dev  @babel/core @babel/cli @babel/preset-env

　　2) 设置配置

　　　　方式一：babel.config.json

　　　　　　　　{

　　　　　　　　　　"presets": [

　　　　　　　　　　　　 [ "@babel/env",

　　　　　　　　　　　　　　{ "targets": {

　　　　　　　　　　　　　　　　"edge": "17",

　　　　　　　　　　　　　　　　"firefox": "60",

　　　　　　　　　　　　　　　　"chrome": "67",

　　　　　　　　　　　　　　　　"safari": "11.1"

　　　　　　　　　　　　　　}, "useBuiltIns": "usage",

　　　　　　　　　　　　　　"corejs": "3.6.5" }

　　　　　　　　　　]

　　　　　　　　 ] }

　　　　　　方式二：创建.babelrc的文件

　　　　　　　　添加如下：

　　　　　　　　　　{

　　　　　　　　　　　　“presets”: ["@babel/preset-env"]

　　　　　　　　　　}

　　　　3) 编译

　　　　./node_modules/.bin/babel src --out-dir lib

　　　　　说明： 将src下的js转为ES2015+的代码转为ES5  并输出到 lib文件夹里

　　　　　简写：你可以利用 npm@5.2.0 所自带的 npm 包运行器将 ./node_modules/.bin/babel 命令缩短为 npx babel

　　　　npx babel src --out-dir lib

　　插件使用方式

　　　　如：安装处理箭头函数的插件

　　　　npm install --save-dev @babel/plugin-transform-arrow-functions

　　　　执行转码

　　　　./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

　　　使用预设，直接转码所有的ES2015+的代码，而不需要一个一个的安装插件再去转码

　　　　使用方式：

　　　　　　npm install --save-dev @babel/preset-env

　　　　　　./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

babel的打包方式

标签：set   nsf   function   firefox   执行   npm   插件   直接   code   

原文地址：https://www.cnblogs.com/webuserlast/p/14891950.html