时间戳

首页 > 解决方案 > Rollup + Babel 转译仍然会创建 `const`

javascript - Rollup + Babel 转译仍然会创建 `const`

问题描述

我有这个设置来将带有汇总 + babel 的 ES6 模块转换为浏览器目标。我尝试了很多东西（atm 是“ie10”），但转译后的 JS 仍然包含const而不是var.

我也有一个单独的.babelrc文件，但它没有改变任何东西。

我究竟做错了什么？

更新：似乎只有来自 'uikit-util' 的代码没有被转译。我可以添加它的路径并保留它：exclude: 'node_modules/**'？

rollup.config.js

import "core-js";
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
const alias = require('rollup-plugin-import-alias');
import path from 'path';
const production = !process.env.ROLLUP_WATCH;

export default {
  input: './src/js/index.js',
  output: {
    file: 'dist/js/build.js',
    format: 'iife',
    sourcemap: false
  },
  plugins: [
    resolve(),
    !production && serve({
      open: true,
      contentBase: '',
      openPage: '/mysite',
      host: 'localhost',
      port: 80,
    }),
    !production && livereload({
      watch: [
        path.resolve(__dirname, 'my/js/')
      ],
    }),
    babel({
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              "ie": "10",
            },
          }
        ]
      ]
    }),
    alias({
      Paths: {
        'uikit-util': './node_modules/uikit/src/js/util/index',
      },
      Extensions: ['js', 'json']
    }),

    commonjs(),
    // production && terser()
  ],
};

包.json

{
  "name": "My Build",
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/plugin-external-helpers": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.8.3",
    "@babel/register": "^7.8.3",
    "autoprefixer": "^9.7.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-add-module-exports": "^1.0.2",
    "browser-sync": "^2.26.3",
    "cross-spawn": "^6.0.5",
    "cssnano": "^4.1.7",
    "del": "^3.0.0",
    "glob": "^7.1.6",
    "less": "^3.10.3",
    "merge-stream": "^1.0.1",
    "npm-run-all": "^4.1.5",
    "rollup": "1.27.9",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-browsersync": "^1.1.0",
    "rollup-plugin-buble": "^0.19.8",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-html": "^0.2.1",
    "rollup-plugin-import-alias": "^1.0.10",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-less": "^1.1.2",
    "rollup-plugin-livereload": "^1.0.4",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-serve": "^1.0.1",
    "rollup-plugin-terser": "^5.1.2",
    "run-sequence": "^2.2.1",
    "serve": "^11.2.0",
    "yargs": "^12.0.5"
  },
  "description": "My Desc",
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "dev": "npm-run-all --parallel start watch",
    "start": "serve ."
  },
  "author": "Me",
  "dependencies": {
    "@babel/polyfill": "^7.7.0",
    "@tarekraafat/autocomplete.js": "^7.2.0",
    "core-js": "3",
    "flatpickr": "^4.6.3",
    "gulp-less": "^4.0.1",
    "leaflet": "^1.6.0",
    "leaflet.markercluster": "^1.4.1",
    "streamqueue": "^1.1.2",
    "uikit": "^3.2.4"
  }
}

index.js

import { $, $$, on, data, ajax, attr, addClass, removeClass } from 'uikit-util';
import { func1, func2, func3} from '../util/index';

export function ABC() {  
...   
}

标签： javascriptnode.jsbabeljsrolluptranspiler

解决方案

尝试设置 browserslistnot IE <= 8或IE > 8.

我已经在我自己的项目中解决了这个问题。

推荐阅读