前端之家

  1. 首页
  2. 问答

在这种情况下，如何使用gulpfile工具直接从node_module导入“额外组件”

• 问答

我使用gulpfile工具自动保持包含三个文件“ index.html”，“ style.css”和“ main.js”的dist版本的运行正常，除非我想导入一些“额外组件”键入“ npm install'xxxxxx'（额外的组件名称）”后从互联网上下载“”，它在console.log上耗尽了错误 “未捕获的SyntaxError：无法在模块外部使用import语句” 我猜那是因为我对gulpfile.js的配置不够好吗？ 您能帮我做正确的配置或解决方案吗？

顺便说一句，我输入了“从'swiper'导入import Swiper;“。在我的main.js上，它不起作用 我还尝试通过“ npm install bootstrap”导入“ Boostrap CSS”，因为我试图使用本地资源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,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(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',});
  // 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>

qf0923 回答：在这种情况下，如何使用gulpfile工具直接从node_module导入“额外组件”
暂时没有好的解决方案，如果你有好的解决方案，请发邮件至：iooj@foxmail.com
gulpnode-moduleswebpack
本文链接：https://www.f2er.com/2653196.html

大家都在问