Skip to content

使用Babel编译

Furic Zhao edited this page Oct 11, 2018 · 4 revisions

使用Babel编译

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

使用Babel6

1、安装依赖包

npm install --save-dev babel-core babel-preset-env babel-loader 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": []
        }
    }
}