系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网页制作 > html5 > 详细页面

ES6 - 基础学习(1): 开发环境搭建

时间:2020-02-23来源:电脑系统城作者:电脑系统城

现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法。项目开发过程中 Webpack 有自动编译转换功能,因此免去了环境搭建这一步。但除了Webpack自动编译外,我们还可以用Babel来完成编译。下面搭建一个基本的ES6开发环境。

一、全局安装babel-cli

  在CMD终端命令行 或 代码编辑工具(vscode、webstorm) 终端中 输入以下命令,全局安装babel-cli。

  npm install -g babel-cli 或 cnpm install -g babel-cli

二、新建源文件目录和基础文件 index.html、jindex.js

  1、新建源文件目录和基础文件 index.html、jindex.js

    

    

  2、项目初始化

    npm init -y

    

    

三、本地安装babel-preset-es2015 和 babel-cli

  npm install --save-dev babel-preset-env 或 cnpm install --save-dev babel-preset-env
  npm install --save-dev babel-cli 或 cnpm install --save-dev babel-cli

  当然也可以两个命令合并执行

  npm install --save-dev babel-preset-env babel-cli 或 cnpm install --save-dev babel-preset-env babel-cli

  安装完成后,package.json文件中会自动添加 devDependencies 属性及内容。

    

  新建 .babelrc文件,在根目录下新建.babelrc文件,并键入以下代码。  (.babelrc文件就是一般的文本文件,不是json文件)

  {
      "presets":["env"],
      "plugins":[]
  }

  .babelrc文件建立完成后,所有的准备工作全部就绪。现在可以在终端命令行 输入转换命令babel src/index.js -o dist/index.js

  babel src/index.js -o dist/index.js

    

三、简化(格式化)转换命令

  上面那一串命令是不是既长又不规则,输起来还麻烦,记起来也麻烦。所以迫切需要将上面那一串命令简化和格式化,恰好这段时间一直在整Electron,Electron项目的启动命令:npm start;打包命令:npm run-script package 都很简洁且规整,所以可以借鉴这一点。

  打开 package.json文件,找到  "scripts" 项,把想简化和格式化成的命令 写入 "scripts" 内。如想简化成:npm run dev,则在 "scripts" 内添加如下代码:

   "dev": "babel src/index.js -o dist/index.js"

  如想简化成:npm run build,则把 dev 换成 build 即可,改成如下即可:

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel src/index.js -o dist/index.js"
    },

  按照这种格式,哪怕想格式化成自己的姓名都行。既方便记忆,又方便输入。修改好以后,下次转换代码直接输入和执行命令:npm run xxxxxx 就行了(甚至直接用 npm run xxxxxx 当命令都行)。下面是 package.json 全部代码以及效果截图:

复制代码
{
    "name": "ES6",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "xxxxxx": "babel src/index.js -o dist/index.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.7.0"
    }
}
复制代码

      

到此为止,ES6的本地开发环境正式搭建完毕,下面就可以随意学习和开发了,并进行代码转换。

 

最后,附上几个Babel常见命令

  1、直接输入babel-node命令,在命令行中直接执行ES6代码:

          babel-node

  2、转换es6.js文件并在当前命令行 程序窗口中输出 转换后的ES5代码:

    babel es6.js

    

  3、将es6.js转换后输出到es5.js文件中(使用 -o 或 --out-file):

     babel es6.js -o es5.js   

          babel es6.js --out-file es5.js

  4、实时监控es6.js文件变化,有变化就重新编译(使用 -w 或 --watch):

         babel es6.js -w --out-file es5.js

         babel es6.js --watch --out-file es5.js

      每次编辑修改ES6代码后,按Ctrl+S保存就会自动执行编译。

  5、编译整个src文件夹并输出到dist文件夹中(使用 -d 或 --out-dir)

         babel src -d dist
    babel src --out-dir dist

  6、编译整个src文件夹并输出到一个文件中

         babel src --out-file es5.js

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载