Babel7 编译

前言

本篇主要介绍 rollup.js 结合目前(2019-04)最新的babel版本v7.x的编译配置。

实现例子

  • 编译 Babel@7

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-06-02/

npm i

## 开发模式
npm run dev

## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build ## 编译脚本
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist ## 编译结果
│   ├── index.js
│   └── index.js.map
├── example ## 例子
│   └── index.html
├── package.json
└── src ## 待编译源码
    └── index.ts

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

## 安装 rollup.js 编译babel@7 插件
npm i --save-dev rollup-plugin-babel@4

## 安装 rollup.js 编译 babel@7 代码的插件模块
npm i --save-dev  @babel/core@7  @babel/plugin-transform-classes@7  @babel/preset-env@7

步骤2: rollup配置

  • 编译基本配置 ./build/rollup.config.js
const path = require('path');
const babel = require('rollup-plugin-babel');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

module.exports = [
  {
    input: resolveFile('src/index.js'),
    output: {
      file: resolveFile('dist/index.js'),
      format: 'iife',
      name: 'Demo',
    }, 
    plugins: [
      babel({
        babelrc: false,
            presets: [
          ['@babel/preset-env', { modules: false }]
        ],
        plugins: [
          ["@babel/plugin-transform-classes", {
            "loose": true
          }]
        ]
      }),
    ],
  },
]
  • 开发模式配置基本 ./build/rollup.config.dev.js
process.env.NODE_ENV = 'development';

const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;

const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;

setTimeout(()=>{
  console.log(`[dev]: ${devUrl}`)
}, 1000);

configList.map((config, index) => {

  config.output.sourcemap = true;

  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }

  return config;
})


module.exports = configList;
  • 生产模式配置基本 ./build/rollup.config.prod.js
process.env.NODE_ENV = 'production';

const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]

  return config;
})

module.exports = configList;
  • 在./package.json配置编译执行脚本
    {
"scripts": {
  "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
  "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
},
}

步骤3: 待编译ES6源码

  • 源码内容 ./src/index.js
class Demo {
    constructor(data) {
        this.data = data;
    }

    logData() {
        console.log('data is : ', this.data);
    }
}

export default Demo

步骤4: 编译结果

  • 在项目目录下执行 开发模式 npm run dev
  • 编译结果在目录 ./dist/ 下

步骤5: 浏览器查看结果

  • example源码./example/index.html 
<html>
  <head>
  </head>
  <body>
    <p>hello world</p>
    <script src="./../dist/index.js"></script>
    <script>
      var demo = new Demo('hello world!');
      demo.logData();
    </script>
  </body>
</html>

data is :  hello world!
>

results matching ""

    No results matching ""