jsx 文件编译成 js 文件的脚本

文件内容.png

1. 新建 package.json 文件

{
  "name": "jsx->js tools",
  "version": "1.0.0",
  "description": "react wegits",
  "scripts": {
    "build": "babel start -d end"
  },
  "devDependencies": {
    "gulp": "^3.8.11",
    "babel-cli": "^6.18.0",
    "babel-plugin-wrap": "^1.0.0",
    "babel-template":"^6.16.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.1.18",
    "gulp-concat": "^2.6.0",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.2",
    "react": "15.x",
    "react-dom": "15.x"
  },
  "babel": {
    "plugins": [
      "wrap"
    ],
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ]
  }
}

重点是 "build": "babel start -d end"，指定从 start 文件夹编译到 end 文件夹

2. 新建 start 和 end 文件夹

• 执行 cnpm install，下载 package.json 文件中依赖的脚本文件
  cnpm 是阿里在国内的镜像服务器，相比 npm，下载速度快！
  首先需安装 cnpm，自行百度
  下载依赖包.png
• 将需要编译的 jsx 文件放在 start 文件夹内，执行 npm run build。则会在 end 文件夹中生成以编译好的 js 文件
  执行脚本.png