zoukankan      html  css  js  c++  java
  • ES6学习之环境配置

    环境配置

    一、建立工程目录

    新建dist文件夹(用于存放转化的es5文件)、新建src文件夹(用于存放es6文件),在该文件夹下建立index.js文件

    二、编写index.html

    在根目录下新建index.html文件,引入index.js。

    注意:需要注意的是在引入js文件时,引入的是dist目录下的文件。

    <script src="/dist/index.js"></script>
    

    三、初始化项目

    npm init -y   //-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
    //package.json内容,可以根据自己的需要修改
    {
      "name": "es6",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    

    三、安装Babel-cli

    npm install -g babel-cli  // 全局安装bebel-cli
    npm install --save-dev babel-preset-es2015 babel-cli //本地安装babel-preset-es2015 和 babel-cli

     安装完成后package.json 中多了devDependencies选项。

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

    在根目录下新建.babelrc文件,并打开录入下面的代码

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

    现在就可以通过运行

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

     在dist文件下生成es5语法的index.js

    四、简化命令:

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

    {
      "name": "dou",
      "version": "1.0.0",
      "description": "dou",
      "main": "index.js",
      "scripts": {
        "build": "babel src/index.js -o dist/index.js"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1"
      }
    }

    之后运行npm run build 就可以转化了。

  • 相关阅读:
    Allegro PCB Design GXL (legacy) 使用slide无法将走线推挤到焊盘的原因
    OrCAD Capture CIS 16.6 导出BOM
    Altium Designer (17.0) 打印输出指定的层
    Allegro PCB Design GXL (legacy) 将指定的层导出为DXF
    Allegro PCB Design GXL (legacy) 设置十字大光标
    Allegro PCB Design GXL (legacy) 手动更改元器件引脚的网络
    magento产品导入时需要注意的事项
    magento url rewrite
    验证台湾同胞身份证信息
    IE8对css文件的限制
  • 原文地址:https://www.cnblogs.com/dgqboke/p/10407207.html
Copyright © 2011-2022 走看看