# 使用Babel编译

TIP

为了更加灵活的配置使用Babel，cyb-cli自v1.4版本起放弃高度封装的策略，将babel编译移入项目中独立配置。如果使用cyb init创建项目，以下babel编译的相关配置会自动创建，无需手动配置。

# 使用Babel7

1、安装依赖包

npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          babelrc: true
        }
      }
    }]
  }
}

3、配置.babelrc

// .babelrc
{
    "presets": [
      ["@babel/preset-env",
        {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 9"]
          }
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-syntax-dynamic-import",
      ["@babel/plugin-proposal-decorators", {
        "legacy": true
      }],
      ["@babel/plugin-proposal-class-properties", {
        "loose": true
      }],
      "@babel/plugin-transform-runtime"
    ],
    "env":
    {
        "development":
        {
            "presets": [],
            "plugins": []
        },
        "production":
        {
            "presets": [],
            "plugins": []
        }
    }
}

# 使用Babel6 （不推荐）

1、安装依赖包

npm install --save-dev babel-core babel-preset-env babel-loader@7 babel-runtime babel-plugin-transform-runtime babel-preset-stage-0 babel-polyfill

2、在webpack.config.js配置babel-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          babelrc: true
        }
      }
    }]
  }
}

3、配置.babelrc

// .babelrc
{
    "presets": [
        ["env",
        {
            "modules": false,
            "targets":
            {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-0"
    ],
    "plugins": ["transform-runtime"],
    "env":
    {
        "development":
        {
            "presets": [],
            "plugins": []
        },
        "production":
        {
            "presets": [],
            "plugins": []
        }
    }
}