Как напрямую импортировать «дополнительный компонент» из node_module в ситуации с помощью инструмента gulpfile - PullRequest
Новая
       102

Как напрямую импортировать «дополнительный компонент» из node_module в ситуации с помощью инструмента gulpfile

0 голосов
/ 13 марта 2020

Я использую инструмент gulpfile, чтобы автоматически создавать дистрибутивную версию с тремя файлами «index. html», «style. css» и «main. js», все работало хорошо, кроме случаев, когда я хотел Чтобы импортировать некоторый «дополнительный компонент», загруженный из inte rnet после ввода «npm install 'xxxxxx' (дополнительное имя компонента)», возникла ошибка в файле console.log «Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля» Я думаю, это потому, что я не настроил свой gulpfile. js достаточно хорошо? Не могли бы вы помочь мне, как сделать правильную конфигурацию или решение?

Кстати, я набрал "импортировать Swiper из 'swiper';" на моем основном. js, и это не сработало. Я также пытался импортировать «Boostrap CSS» с помощью «npm install bootstrap», потому что вместо этого я пытался использовать локальный ресурс npm install "CDN". То же самое не сработало.

Вот мой код 

const gulp = require('gulp')
const $ = require('gulp-load-plugins')()
const concat = require('gulp-concat')
const browserSync = require('browser-sync').create()
const sass = require('gulp-sass')
const gulpCleanCSS = require('gulp-clean-css')
const del = require('del')
const uglify = require('gulp-uglify-es').default

const paths = {
  src: {
    html: 'src/views/*.html',
    scss: 'src/sass/*.scss',
    js: 'src/js/*.js',
    img: 'src/views/img/*',
    img2: 'src/sass/img/*'
  },
  dist: {
    main: './dist',
    html: 'dist/*.html',
    css: 'dist/*.css',
    js: 'dist/*.js',
    img: './dist/img'
  }
}

// 移除所有在 dist 資料夾中的檔案
function clean () {
  return del(['dist'])
}

// 將 HTML 檔搬移到 dist 資料夾
function moveHTML () {
  return gulp.src(paths.src.html).pipe(gulp.dest(paths.dist.main))
}

function moveIMG () {
  return gulp
    .src([paths.src.img, paths.src.img2]
    )
    .pipe(gulp.dest(paths.dist.img))
}

// 把 SASS 編譯成 CSS 檔
function compileSASS () {
  return gulp
    .src(['vendor/*.css', paths.src.scss], { sourcemaps: true })
    .pipe(sass())
    .pipe(concat('style.css'))
    .pipe(gulp.dest(paths.dist.main))
}

// 把 JS 檔載入
function concatJS () {
  return gulp
    .src(
      [
        paths.src.js
      ],
      { sourcemaps: true }
    )
    .pipe(concat('main.js'))
    .pipe(gulp.dest(paths.dist.main))
}

function serve (done) {
  browserSync.init({
    server: {
      baseDir: paths.dist.main
    }
  })

  done()
}

function liveReload (next) {
  browserSync.reload()
  next()
}

function watch () {
  // gulp.watch(<file-to-watch>, <task-to-run>)
  gulp.watch(paths.src.html, gulp.series(moveHTML, liveReload))
  gulp.watch(paths.src.scss, gulp.series(compileSASS, liveReload))
  gulp.watch(paths.src.js, gulp.series(concatJS, liveReload))
  gulp.watch(paths.src.img, gulp.series(moveIMG, liveReload))
  gulp.watch(paths.src.img2, gulp.series(moveIMG, liveReload))
}

function uglifyJS () {
  return gulp.src(paths.dist.js)
    .pipe(uglify())      // time costed, production only
    .pipe(gulp.dest(paths.dist.main))
}

function cleanCSS () {
  return gulp.src(paths.dist.css)
    .pipe(gulpCleanCSS())
    .pipe(gulp.dest(paths.dist.main))
}

exports.clean = clean

exports.default = gulp.series(
  clean,
  gulp.parallel(moveHTML, compileSASS, concatJS, moveIMG),
  serve,
  watch
)

exports.build = gulp.series(
  clean,
  gulp.parallel(moveHTML, compileSASS, concatJS, moveIMG),
  gulp.parallel(uglifyJS, cleanCSS)
)
'use strict'
window.doc = document
import Swiper from 'swiper';
function changeColor () {
  // console.log(window.doc.documentElement.scrollTop)
  let docScrollTop = window.doc.documentElement.scrollTop
  let ceilingBar = window.doc.querySelector('.ceiling_bar')
  let navBar = window.doc.getElementById('wholeNav')
  let goToTop = window.doc.querySelector('.bt_gototop')
  if (docScrollTop > 100) {
    ceilingBar.classList.add('orange')
    navBar.classList.add('shadow')
  } else {
    ceilingBar.classList.remove('orange')
    navBar.classList.remove('shadow')
  }
  if (docScrollTop > 1000) {
    goToTop.style.display = 'block'
  } else {
    goToTop.style.display = 'none'
  }
}

function displayCopyright () {
  let copyright = window.doc.querySelector('.logo_youce')
  let navButton = window.doc.getElementById('navButton')
  let crossNavButton = window.doc.getElementById('crossNavButton')
  let ceilingBar = window.doc.querySelector('.ceiling_bar')
  let collapseNavbar = window.doc.getElementById('collapseNavbar')
  console.log('one')
  if (crossNavButton.style.display === 'block') {
    crossNavButton.style.display = 'none'
    collapseNavbar.classList.remove('show')
    copyright.classList.remove('disappear')
    navButton.classList.remove('hidden')
    ceilingBar.classList.remove('orange')
  } else {
    crossNavButton.style.display = 'block'
    collapseNavbar.classList.add('show')
    copyright.classList.add('disappear')
    navButton.classList.add('hidden')
    ceilingBar.classList.add('orange')
  }
}

window.doc.getElementById('navButton').addEventListener('click', displayCopyright)
window.doc.getElementById('crossNavButton').addEventListener('click', displayCopyright)

window.doc.getElementById('button_introduction').addEventListener('click', displayCopyright)
window.doc.getElementById('button_core_value').addEventListener('click', displayCopyright)
window.doc.getElementById('button_service').addEventListener('click', displayCopyright)
window.doc.getElementById('button_career').addEventListener('click', displayCopyright)
window.doc.getElementById('button_benefits').addEventListener('click', displayCopyright)
window.doc.getElementById('button_contact').addEventListener('click', displayCopyright)

window.addEventListener('scroll', changeColor)

function onInputFocus (event) {
  event.target.parentElement.classList.add('input--filled')
}

function onInputBlur (event) {
  if (event.target.value.trim() === '') {event.target.parentElement.classList.remove('input--filled')}
}

for (var i = 0; i < window.doc.querySelectorAll('input.input__field').length; i++) {
  window.doc.querySelectorAll('input.input__field')[i].addEventListener('focus', onInputFocus)
  window.doc.querySelectorAll('input.input__field')[i].addEventListener('blur', onInputBlur)
}
window.doc.querySelector('textarea.input__field').addEventListener('focus', onInputFocus)
window.doc.querySelector('textarea.input__field').addEventListener('blur', onInputBlur)
<!DOCTYPE html>
<html lang="zh-Hant">

<head>
    <title>You-Ce官網</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
    <!-- /Bootstrap CSS -->
    <link rel="stylesheet" href="style.css" type="text/css" media="all">
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            async defer>
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>



<!-- Vendor -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<!-- Vendor -->
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

<script type="text/javascript">
  var swiper = new Swiper('#service_pc_swiper', {
    slidesPerView: 1,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    // autoplay: { //8.自動播放
    //   delay: 4000, //8.1自動播放間隔時間
    //   stopOnLastSlide: false, //8.2切換到最後一個是否停止，但是在loop:true下無效果；
    //   disableOnInteraction: false, //8.3使用者觸碰,懸停，拖放是否自動播放停止，預設為true;
    //   reverseDirection: false, //8.4 是否開啟反向輪播，預設為false
    // },
  })
  var core_sw = new Swiper('#core_mobile_swiper', {
    pagination: {
      el: '.core_swiper-pagination',
      clickable: true,
    },
  });
  // var recaptcha_widget
  // var onloadCallback = function () {
  //   // alert("grecaptcha is ready!");
  //   recaptcha_widget = grecaptcha.render('recaptcha', {
  //     'sitekey': '6Lec6awUAAAAAN-nYhwyYbiwPeaY20HhPCpnR_zl'
  //   })
  // }
  $('a[href=#introduction], [href=#core_value], [href=#service], [href=#career], [href=#benefits], [href=#contact]').click(function () {

    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top - 50 + 'px' }, 500)

    return false//不要这句会有点卡顿

  })
  $('a[href=#home]').click(function () {

    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top - 200 + 'px' }, 500)

    return false//不要这句会有点卡顿

  })


</script>


<script type="text/javascript" src="main.js"></script>
</body>

</html>
...