rollup

rollup配置 babel,使用babel7.0.0+

yarn add rollup-plugin-babel@4.4.0 @babel/core@7.9.0 @babel/preset-env@7.9.0 babel-preset-es2015-rollup@3.0.0

根目录新建.babelrc

{
  "presets": ["@babel/env"] 
}

rollup-plugin-uglify 打包es6的错误

原因： Note: uglify-js is able to transpile only es5 syntax. If you want to transpile es6+ syntax use terser instead

解决方案： 使用 rollup-plugin-terser 替代rollup-plugin-uglify

demo

rollup.config.js

import rollupTypescript from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from "rollup-plugin-terser";
import eslint from 'rollup-plugin-eslint';

export default {
    input: 'src/main.js',
    output: {
      file: 'demo.js',
      format: 'umd',
      name: 'demo' // umd必须配置name
    },
    // sourceMap: true,
    plugins: [
      resolve(), // tells Rollup how to find modules in node_modules
      commonjs(), // converts node_modules to ES modules
      babel({
        exclude: 'node_modules/**' // 只编译我们的源代码
      }),
      rollupTypescript(),
      terser(),
      eslint({
        throwOnError: true,
        throwOnWarning: true,
        include: ['src/**'],
        exclude: ['node_modules/**']
      })
    ]
  };

package.json

"dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",x
    "rollup-plugin-typescript2": "^0.27.0",
    "ts-loader": "^6.2.2",
    "typescript": "^3.8.3"
  },
  "devDependencies": {
    "babel-preset-es2015-rollup": "^3.0.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-eslint": "4.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^5.3.0"
  }

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true, //代码映射
        "noImplicitAny": true, //强类型检查
        "module": "es2015", //组织代码方式
        "target": "es2015", //编译目标平台
        "allowJs": true, //允许使用js
        "allowSyntheticDefaultImports": true //允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。
    },
    "include": [
        "./src"
    ]
  }