zoukankan      html  css  js  c++  java
  • ES6 环境的搭建

    安装babel

    npm install --g babel-cli

    在项目目录下输入

    npm init -y

    会自动创建package.json文件

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

    你会发现,在dist目录下确实生产了index.js文件,但是文件并没有变化,还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换

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

    cnpm install --save-dev babel-preset-es2015 babel-cli 很慢

    安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。

    "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" }

    新建.babelrc

    在根目录下新建.babelrc文件(注意,以点开头的文件是隐藏文件,需要在linux环境通过命令创建),并打开录入下面的代码

    {

    "presets":[

    "es2015"

    ],

    "plugins":[]

    }

    这个文件我们建立完成后,现在可以在终端输入的转换命令了,这次ES6成功转化为ES5的语法。

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

    简化转化命令

    在学习vue 的时候,可以使用npm run build 直接利用webpack进行打包,在这里也希望利用这种方式完成转换。打开package.json文件,把文件修改成下面的样子。

    {

    "name": "es6",

    "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

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

    },

    "keywords": [],

    "author": "",

    "license": "ISC",

    "devDependencies": {

    "babel-cli": "^6.24.1",

    "babel-preset-es2015": "^6.24.1"

    }

    }

    修改好后,以后我们就可以使用 npm run build 来进行转换了。

  • 相关阅读:
    小程序学习资料
    tomcat单应用多实例部署报错 应用jar不存在
    nginx windows版本 1024限制
    mysql连接数
    rocketmq
    nginx路径匹配
    war包的压缩解压缩
    IIS访问HTTP Error 400. The request hostname is invalid
    Microsoft 安全扫描程序
    vscode
  • 原文地址:https://www.cnblogs.com/zhi-ming/p/10453151.html
Copyright © 2011-2022 走看看