使用包管理工具配置babel
在前端项目开发中，babel是必不可少的，我们可以借助它帮我们转换es6的语法，使得我们的代码兼容性更高，也可以将jsx等语法转换成浏览器能识别的js语言，下面我们看看如何从零开始单独配置一个babel
首先我们需要通过命令：npm init 创建一个项目的说明书，说明书中需要填写信息如下（一般直接回车就好）：
-
--package name:(默认当前文件夹名字) /项目的名称
-
--version:(1.0.0) /当前版本号
-
--description: /项目描述(随意填如:练习webpack使用)
-
--entry point: (index.js) /入口文件(不管)
-
--text command: /text命令
-
--git repository: /git仓库
-
--keywords: /关键字
-
--anthor: /作者
-
--license: /证书 可以用MIT(别人可以随意使用)
以上信息填写完成后，会问你是否OK?，直接回车即可
完成之后，会在根目录中生成一个package.json配置文件，其中记录了我们刚刚配置的那些信息
在其中我们需要添加两条字段：dependencies , devDependencies
{
"name": "test",
"version": "1.0.0",
"description": "测试使用",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "tachmiao",
"license": "ISC",
"dependencies":{},//用来配置运行时候的依赖
"devDependencies": {}//用来配置开发时候的依赖
}
接下来就是安装babel了
首先看下安装命令：npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react --save-dev
命令中使用到的含义：
@babel/core babel的核心
@babel/cli babel的命令行工具
babel的两个preset（更多的可以在babel官网中查看）：
@babel/preset-env 可以将es6的语法转换成es5的语法
@babel/preset-react 将jsx语法转换成js
安装完成后，我们会发现在根目录下会出现一个node_modules文件夹，里面就是存放的一些插件与其需要用到的依赖
在 package.json 文件中创建一个脚本，使我们更方便的使用babel工具：
{
"scripts": {
"babel": "babel"
},
}
我们可以新建两个文件夹：public src
在src文件夹中放入我们需要编译的文件，然后将编译好的文件放入public文件夹中
如图所示：
创建一个babel的配置文件：
在根目录中创建一个文件名为：.babelrc的配置文件，其中输入：
{
"presets":["@babel/preset-env","@babel/preset-react"]//需要用到的preset
}
在命令行中使用命令：npm run babel -- src/index.js -o public/index.js
此命令可以将src里面的index.js文件编译到public/index.js文件中
可以使用命令：npm run babel -- src/index.js -o public/index.js -w
持续监听src下面的index.js变化，实时编译文件
src/index.js：
编译后的public/index.js：
原文链接：http://blog.tachmiao.com/?id=85