文章目录
文章目录
#目录
##简易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
//初始化
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
//初始化
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