将ES6模块转换为Vanilla js并使用Babel&Gulp插入输出文件中

时间:2019-01-08 16:37:00

标签: javascript gulp babel transpiler

如何将ES6模块注入输出文件?该代码应位于输出文件中,以便浏览器可以读取它。

我以为小嘴巴可能会这样吗? 我必须在-babelrc中插入其他预设或插件吗?

===我的测试文件===

swiper-config.js

    import Swiper from 'swiper';
    console.log("The 'Swiper' script should be inserted here.");

===我的工具===

gulpfile.js(部分):

/*
JS:MAIN - Transpiling Javascript via Babel
*/
gulp.task("js-babel-main", () => {
  console.log($.chalk.yellow.bold('--> JS::MAIN - Transpiling Javascript via Babel'));
  return gulp.src(pkg.paths.src.js + '**/*.js')
    .pipe($.plumber({
      errorHandler: onError
    }))
    .pipe($.newer({
      dest: pkg.paths.build.js,
      ext: '.js',
      extra: pkg.paths.src.js + '**/*'
    }))
    .pipe($.size({
      gzip: true,
      showFiles: true
    }))
    .pipe($.babel()) // See also .babelrc
    .pipe($.flatten())
    .pipe(gulp.dest(pkg.paths.build.js))
    .pipe($.filter("**/*.js"))
    .pipe($.browserSync.stream());
});

.babelrc

{
  "presets": [
    [
      "@babel/preset-env", {
        "debug": true,
        "modules": false,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

package.json(部分):

"devDependencies": {
  "@babel/core": "^7.2.2",
  "@babel/helper-module-transforms": "^7.2.2",
  "@babel/plugin-transform-runtime": "^7.2.0",
  "@babel/polyfill": "^7.2.5",
  "@babel/preset-env": "^7.2.3",
  "babel-plugin-import": "^1.11.0",

  ...

0 个答案:

没有答案