之前在项目中使用.balelrc文件,但是一直不知道具体怎么使用,就知道可以将es6语法转码为es5语法。 今天就简单的做个例子,也算是记录一下困扰了好久的问题。 转码步骤:
1.1 安装Babel,可以直接使用命令行安装。
1.2 配置文件 .babelrc该文件用来设置转码规则和插件的,基本格式为: { "presets": [], "plugins": [] }
# 最新转码规则 $ npm install --save-dev @babel/preset-env # react 转码规则 $ npm install --save-dev @babel/preset-react 然后将这些规则加入.babelrc文件 { "presets":[ "@babel/env", "@babel.preset-react" ], "plugins":[] } 1.3 命令行转码Babel 提供命令行工具 npm install --save-dev @babel/cli 基本用法: # 转码结果输出到标准输出 $ npx babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ npx babel example.js --out-file compiled.js # 或者 $ npx babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ npx babel src --out-dir lib # 或者 $ npx babel src -d lib # -s 参数生成source map文件 $ npx babel src -d lib -s 这里附上自己转码配置文件和转码前后文件内容和转码命令(就是自己玩了一下,嘿嘿嘿~) 其实网上的资料还是很多滴,就是自己想要知道怎么自己转码,其实用webpack也是比较简单的。 首先,安装babel-preset-env包:npm install –save-dev babel-preset-env 在根目录下创建.babelrc文件。 为了检验我们的配置是否成功,我们再安装babel-cli包:npm install --save-dev babel-cli,然后我们在根目录下创建一个babel_test文件用于测试,如下: let arr = [1, 2, 3]; console.log([...arr]); 并在package.json文件中添加npm脚本: "scripts": { "dev": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "babel": "babel ./babel_test/test.js -o ./babel_test/res.js" }, 该脚本的作用就是将test.js进行转码,并将转码后的内容存储到res.js文件中。 在终端执行npm run babel则会在相同目录下生成res.js: "use strict"; var arr = [1, 2, 3]; console.log([].concat(arr)); 该文件已经转码成功,说明我们的配置是正确的。 来源:https://www./content-4-400701.html |
|