rollup打包js代码

个人学习过程中的一个记录：

1. 创建一个文件夹

2. 在这个文件夹下，使用命令行 输入命令，初始化一个项目 

npm init -y

然后根目录下会产生一个package.js文件，这个文件中包含了项目相关信息以及第三方依赖等

3. 在根目录下新建一个文件rollup.config.js

这个文件用来配置rollup，配置打包的规则

4. 在package.js文件中scripts中添加以下代码：

"build": "rollup -c"

这段代码的意思是：在运行npm run build 打包的时候，使用rollup打包

5. rollup.config.js文件内容如下：

export defaut {
    input: './src/mian.js',  // 入口文件
    output: [
        {
            file: './dist/index.js', // 出口文件
            name: 'test' // 包的名字,
            format: 'umd' // 代码打包时的格式，这个格式可以前后端通用，除此之外还有其他格式：cjs，iife，es，amd
            minify: true // 代码是否压缩
        },
        {
            // 可同时输出多个文件
        }
    ]
}

6. 在src/main.js中写入需要打包的代码，然后运行npm run build 可以看到dist/index.js中有打包过的代码，这里面的代码只有mian.js使用到的代码才会被打包进来

7. 使用babel插件来使低版本的浏览器可以兼容ES6语法：（在rollup中使用babel：npm i -D rollup-plugin-babel）

使用这个插件要注意版本问题，因为rollup的版本目前和babel的高版本还没有兼容，如果使用babel高版本会出现问题，所以安装插件时，如下：

{
    "babel-core": "^6.26.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "rimraf": "^2.6.2",
    "rollup": "^0.65.0",
    "rollup-plugin-babel": "^3.0.7",
    "uglify-js": "^3.4.9"
}

下面三个插件要使用低版本的：

babel-core@6
rollup-plugin-babel@3
babel-preset-es2015-rollup@3

8. 在根目录下新建一个文件.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules":false
      }
    ]
  ]
}

9. 在rollup.congfig.js中引入插件

import babel from 'rollup-plugin-babel';

export default {
  input: './src/timeformat.js',
  output: {
    file: './dist/main.min.js',
    format: 'umd',
    name: 'timeformat-test'
  },
  plugins: [
    // resolve(),
    babel({
      exclude: 'node_modules/**' // 只编译我们的源代码
    })
  ]
}

以上的配置好之后就能将ES6语法转换成普通的js代码了