配置es6编译环境

文章目录

    • @[toc]

#目录
##简易babel配置方法
在node环境安装npm包

//初始化
npm init -y

//安装babel
npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
npm install --save-dev babel-cli

//创建 .babelrc 文件
{
    "presets": ["es2015", "latest"],
    "plugins": []
}

//创建 index.js   
[1, 2, 3].map(item => item + 1);

//运行
运行 babel index.js

更多配置参考

##webpack里配置babel
配置es6编译环境_第1张图片

//初始化
npm init -y

//安装babel
npm install webpack babel-loader --save-dev
 
//在src里创建 index.js   
[1, 2, 3].map(item => item + 1);

//创建 .babelrc 文件
{
    "presets": [
        ["latest", {
            "es2015": {
                "modules": false
            }
        }]
    ],
    "plugins": ["external-helpers", "babel-plugin-transform-regenerator"]
}

//配置webpack.config
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './build/bundle.js'
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader'
        }]
    }
}

//修改package.json  main和srcipts
{
  "main": "index.js",
  "scripts": {
    "start": "webpack"
 }

//运行
npm start

index.html里加入 ,运行完可打开index.html

##rollup里配置babel
配置es6编译环境_第2张图片

//初始化
npm init -y

//安装babel
npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest  --save-dev
 
//在src里创建 index.js   
[1, 2, 3].map(item => item + 1);

//配置rollup.config.js
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'

export default {
    entry: 'src/index.js',
    format: 'umd',
    plugins: [
        resolve(),
        babel({
            exclude: 'node_modules/**'
        })
    ],
    dest: 'build/bundle.js'
}

//修改package.json  main和srcipts
{
  "main": "index.js",
  "scripts": {
    "start": "webpack"
 }
 
//运行
npm start

文档:http://es6-features.org/#Constants

你可能感兴趣的:(webpack,gulp)