将es6语法转换为低版本文件,便于浏览器访问
1:首先建立一个工作空间,下面建两个示例文件,home和search的js文件(如图1),文件内容(如图2)
图一
图二
2:在父目录的终端环境中打开,进行初始化,在命令中会有一个package name: 的回应,需要你手动填写包名(我这里的包名是lmx).随后在此目录下,自动生成一个package.json文件. 3:接下来就是安装babel包,安装成功后会在package.json的最后面生成有关@babel/core和@babel/cli的有关信息.即表示安装成功.
npm init
npm install --save-dev @babel/core @babel/cli
4:在父目录下创建一个 .babelrc的文件,文件内容为以下代码.
{"presets": ["@babel/preset-env"]}
5:在父目录的终端环境中打开,执行以下命令:完成命令后会在package.json的最后面生成有关@babel/preset-env的有关信息
npm install @babel/preset-env@7.11.0 --save-dev\
6:执行以下命令:lmx表示的是上面提到的创建文件夹的名字,zs表示的是新创建的文件夹的名字,执行成功后lmx里面的文件内容已被修改为zs里面的内容.
npx babel lmx -d zs
7:将zs文件夹里面生成的home/search文件导入到index.html里,运行index.html文件,在控制台会将home和search里面的文件输出内容输出.表明转化成功
