ES6环境的搭建步骤

清疚 2021-11-08 15:58 414阅读 0赞

*  **步骤一**：在自己电脑里面选择一个盘新建一个文件夹，例如es6use文件夹  
    ![在这里插入图片描述][20190806140919646.png]
 *  **步骤二**：在es6use文件夹下建立一个src文件夹、一个dist文件夹、一个index.html文件（其中src文件夹用来存放自己用es6语法写的js文件；dist文件夹用来存放es6转换为es5语法的js文件）  
    ![在这里插入图片描述][20190806141358127.png]  
    其中的node\_modules是我最后安装babel转换包的时候生成的，演示的时候忘记删除了，你在目录下最后也会生出这个文件
 *  **步骤三**：在src文件夹下面建立一个index.js文件，并在该文件下面写入下面内容用来测试；再在index.html文件里面引入该文件：**< script src="./dist">< /script>**,因为最后要用的是转换为es5的js文件  
    ![在这里插入图片描述][20190806141715497.png]
 *  **步骤四**：对项目进行初始化，在控制台切换到es6use目录下，输入"**npm init -y**"即生成一个package.json文件，打开文件内容如下  
    ![在这里插入图片描述][20190806142618364.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]
 *  **步骤五**：开始环境的搭建。先输入”**npm install babel-cli -g**"对bebal进行全局安装，如果网速较慢，可以使用cnpm；接着再输入"**npm install --save-dev babel-preset-es2015 babel-cli**“，将babel-preset-es2015和babel-cli进行本地安装，安装成功后就会package.json文件中有记录,多了devDependencies这一项  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]
 *  **步骤六**：在es6use目录下新建一个 **.babelrc**文件，在文件中输入：  
    ![在这里插入图片描述][20190806143522140.png]
 *  **步骤七**：在控制台输入"**babel src/index.js -o dist/index.js**"，-o表示输出，即将src下的文件index.js通过babel转换器转换后输出到dist文件夹下的index.js文件。会发现dist文件夹下自动生成了index.js文件，内容是转换过来的es5语法，如下  
    ![在这里插入图片描述][20190806143831609.png]  
    这就说明环境搭建成功了，自己可以多进行几次测试，即在src文件下建立js文件用es6语法写入，在终端或cmd中输入命令babel src/index.js -o dist/index.js，再在dist文件下来看下语法是否转换过来，最后在index.html中引入dist里的js文件来使用
 *  如果想使用简单一点的转换命令可以通过在package.json文件中的scripts属性进行更改：如下  
    ![在这里插入图片描述][20190806144609983.png]  
    再在控制台输入npm run build可以得到相同效果

[20190806140919646.png]: /images/20211108/4bd6205001f54857a5bc9e9e173a4cfa.png
[20190806141358127.png]: /images/20211108/cc6336499328448c95ebdc1556bd32b9.png
[20190806141715497.png]: /images/20211108/ce88de785c8d49c9a411e723168bd694.png
[20190806142618364.png]: /images/20211108/b24ab540816c45338e1443a0a4c963c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20211108/55d6f67267994c0f9a03b769168fa0fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20211108/0cd3337b03e44effb820bf89ce6553cf.png
[20190806143522140.png]: /images/20211108/c09614b12dfa4cf18c9575d2b1622940.png
[20190806143831609.png]: /images/20211108/7901082ef458401fba9a25697f464a1f.png
[20190806144609983.png]: /images/20211108/3653a80c19d04b5dabfacb053bee6fa6.png