ECMAScript学习笔记(1)--编译环境搭建(VScode)-创新互联

参考文档:http://es6.ruanyifeng.com/#docs/intro
https://www.w3cschool.cn/ecmascript/

创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目成都网站制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元平安做网站,已为上家服务,为平安各地企业和个人服务,联系电话:18982081108

ECMAScript是一种定义脚本语言的规范,Javascript正是基于这种规范的一种实现。JavaScript是一种弱类型定义、动态编程脚本语言,通过解释器运行而非编译机器码运行。

ECMAScript6调试环境配置,最新版本的nodejs对ES6能够大部分支持,并非全部。可以用ES-Checker对安装的nodejs检测支持es6的程度:
(1)安装:npm install -g es-checker
(2)windows下cmd运行es-checker,如下:

Passes 38 feature Detections
Your runtime supports 90% of ECMAScript 6

Babel 是一个广泛使用的 ES6 转码器,对ES6代码转码为ES5。配置方法如下:
(1)在调试项目的根目录下,用npm(最新的nodejs自带npm模块管理工具)安装对应的规则模块(根目录下会生成一个node_modules文件夹),如下:

//最新的转码规则
npm install --save-dev babel-preset-latest

//react转码规则
npm install --save-dev babel-preset-react

//选2阶段的语法提案
$ npm install --save-dev babel-preset-stage-2

babel 官方推荐将 Babel 安装在本地,因为 Babel 的不同版本以及不同转码规则会起到不同的效果,全局安装会带来不必要的麻烦,所以没有加 -g 参数。

(2)在调试项目的根目录下新建.babelrc文件,内容配置如下:

{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}

(3)在项目调试根目录下建立src(源文件),dist(转码后生成文件)。Babel 提供babel-cli工具,用于命令行转码。

npm install --global babel-cli

命令格式如格式如下:

babel example.js
//转码结果写入compiled.js --out-file或-o
babel example.js --out-file compiled.js

babel example.js -o compiled.js

//整个目录转码,src目录下指定输出dist下,--out-dir 或 -d参数
babel src --out-dir dist
babel src -d dist

//-s 生成source map文件
babel src -d dist -s


babel因为不是全局安装,所以在当前目录下使用命令需要再二次配置,两个方案:
a、在项目的根目录下自行添加一个 babel.cmd 文件,并写入以下内容,就能使用项目里的 babel 命令

node .\node_modules\babel-cli\bin\babel.js %*

同样使用 babel-node 命令,在项目的根目录下自行添加一个 babel-node.cmd 文件,并写入以下内容:

node .\node_modules\babel-cli\bin\babel-node.js %*

b、babel-cli 模块已经安装就绪,然后改写当前目录下的:package.json(如果没有该文件,用npm init生成)

{
"name": "es6",
"version": "1.0.0",
"description": "es6",
"main": "index.js",
"scripts": {
"build": "babel src -d lib"
},
"author": "",
"license": "ISC",
"keywords": [],
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1"
}
}

转码的时候直接运行以下命令:

npm run build

该命令将目录src中源文件转码到指定目录dist。

(3)以上是对命令行支持,下面配置到VScode中直接转码然后编译:
a、VScode打开项目文件夹,调试->添加配置,选择node.js配置launch.json

{

"version": "0.2.0",
"configurations": [

    {
        "type": "node",
        "request": "launch",
        "name": "启动程序",
        "program": "${workspaceFolder}\\index.js"
    }
]

}

修改解释的程序目录:

{
"version": "0.2.0",
"configurations": [

{
        "type": "node",
        "request": "launch",
        "name": "启动程序",

        // 程序的绝对路径

        // 调试之前要做的任务名
        "preLaunchTask": "build",   

        // 如果存在SourceMap就使用
        "sourceMaps": true,  

        // 是否启动后自动停止程序
        "stopOnEntry": false,  

        // 生成的代码中,如果无法映射回源代码,就自动单步执行
        "smartStep": true,  

        // 指出编译后的文件地址
        "outFiles": [
            "${workspaceRoot}\\dist\\**"
        ],
        "program": "${workspaceFolder}\\dist\\index.js",

    }
]

}

调试前要做的任务为:npm build run,点击工具栏:任务 -> 配置任务,选择要配置的任务:npm: build,会自动新建文件./.vscode/tasks.json,文件如下:

{

"version": "2.0.0",
"tasks": [
    {
        "label": "build",
        "type": "npm",
        "script": "build",
        "problemMatcher": []
    }
]

}
其中,tasks.json中的label属性对应于launch.json中preLaunchTask值。

b、配置项目根目录下的package.json

{
"name": "es6",
"version": "1.0.0",
"description": "es6",
"main": "index.js",
"scripts": {
"build": "babel src -d dist", (注意这个地方的npm run build)
},
"author": "",
"license": "ISC",
"keywords": [],
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1"
}
}

(4)最后做一个测试,在src中建如下文件:
hello.js

export default () => console.log('Hello');

index.js

import hello from './hello';
hello();

运行后,dist中会生成转码的es5文件,控制台显示hello

2018年5月19日修复错误,菜鸟自我学习,欢迎交流指正。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:ECMAScript学习笔记(1)--编译环境搭建(VScode)-创新互联
链接分享:http://bzwzjz.com/article/hdhsj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 高端定制网站设计 成都网站建设 营销网站建设 宜宾网站设计 网站建设改版 移动网站建设 成都网站建设 成都网站建设推广 网站制作 高端网站设计 网站建设费用 网站制作报价 企业网站设计 成都网站建设 成都网站制作 成都网站制作 成都网站建设 定制网站设计 成都网站建设 成都网站设计 成都网站建设公司 成都网站制作