Yêu cầu thg 11 2, 2019 4:19 CH 431 0 4
  • 431 0 4
0

Vấn đề về Webpack và NuxtJS

Chia sẻ
  • 431 0 4

Chào mọi người,

Mình có vấn đề sau mọi người giúp đỡ mình với.

HIện tại mình có các file thư viện JS mình muốn xử dụng cho website của mình.

Các file JS:

/*
  ** assets/js/a.js
  */
 console.log('File JS a');
/*
  ** assets/js/b.js
  */
 console.log('File JS b');
/*
  ** assets/js/EEEEEE.js
  */
 console.log('File JS EEEEEE');
/*
  ** assets/js/main.js
  */
 require('./a.js')
 require('./b.js)
 console.log('File JS main');

Mình sử dụng NuxtJS và thêm vào file nuxt.config.js như sau:

build: {
    vendor: [
      '~/assets/js/EEEEEE.js',
      '~/assets/js/main.js'
    ],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }

nhưng KHÔNG được.

Xin nhờ các cao thủ chỉ giáo giúp với ạ.

Và mình cũng tìm hiểu được biết là webpack có tính năng load những gì cần, chứ không load hết 1 lần vì nếu vậy ứng dụng nhiều file JS thì sẽ rất nặng.

Không biết cụ thể là như thế nào nhỉ?

Rất mong nhận được sự giúp đỡ của mọi người. Mình còn gà nên có gì sai sót mong mọi người bỏ qua cho.

Cảm ơn mọi người nhiều.

4 CÂU TRẢ LỜI


Đã trả lời thg 11 3, 2019 11:44 SA
Đã được chấp nhận
+2

Bạn đọc kĩ hơn ở phần này nhé! https://nuxtjs.org/api/configuration-build

extend có 2 tham số configctx, trong đó thì config sẽ chỉ đến các hoạt động bạn muốn thực hiện, còn context chỉ đến môi trường và đk thực hiện(isClient hay loader là gì )

Chia sẻ
Avatar lehoangnnx @lehoangnnx
thg 11 3, 2019 2:04 CH

Cảm ơn bạn rất nhiều, phần này mình cũng đã đọc qua, nhưng thực sự không hiểu lắm.

Mình đang tìm hiểu webpack nhưng hình như NuxtJS extend lại webpack nên cách sử dụng nó khác hay sao ý.

Hiện tại thì mình muốn build các file JS (dùng webpack thông qua extend(config, ctx) ) tại thư mục assets thành 1 file (file bundle chẳng hạn), nhưng vẫn chưa được, :😭😭

Mình phải nghiên cứu thêm mới được.

Cảm ơn bạn đã giúp mình.

Avatar Hoàng Đức Quân @devil_boom_129
thg 11 3, 2019 2:17 CH

@lehoangnnx nếu tại assets thì bạn chỉ cần viết các file js custom thông thường thôi. mà thường thì ta sẽ viết js vào phần script của các file .vue trong thư mục của project. Còn nếu bạn add thư viện bên thứ 3 bằng webpack thì chỉ cần tại thư mục của project, bạn chạy yarn add là tự động thư viện được thêm vào thư mục node_modules và chỉ việc load từ đấy ra.

Avatar Hoàng Đức Quân @devil_boom_129
thg 11 3, 2019 2:18 CH

à nếu câu 1 của mình đúng thì bạn accept answer giúp mình nhe @lehoangnnx

Avatar lehoangnnx @lehoangnnx
thg 11 3, 2019 3:11 CH

@devil_boom_129 như bạn nói ấy, thì thường sẽ viết script vào file .vue nhưng do đây là template HTML/JS có sẵn ý, nên cần phải load các file JS của template. giờ là làm sao load các file đó vào cuối file khi render, mình dùng script trong head thì oke, nhưng có 1 file bên trong lại dùng require nên phải dùng webpack để buil, mình mới tìm hiểu nuxt và webpack nên không rành lắm, phải tìm hiểu thêm mới được Cảm ơn bạn nha.

Đã trả lời thg 11 3, 2019 11:54 SA
+2

còn về vế 1 của bạn thì giống lỗi này

https://stackoverflow.com/questions/47342479/how-to-load-local-js-file-with-nuxt

Và cách giải quyết trong ấy hơi nhỏ nhưng khó nhìn: bạn đổi thành '/js/EEEEEE.js' thôi

Chia sẻ
Đã trả lời thg 11 6, 2019 8:05 SA
+1

head: {

	script:[ 
	{
		src:"https://code.jquery.com/jquery-3.4.1.min.js",
		type: "text/javascript"
	},
	
	{
		src:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
		type: "text/javascript"
	},

	{
		type: 'text/javascript',
		src: '/js/refresh.magic.js', /* đường dẫn thư mục static/js/... */
		body: true,
	},
	]
},
Chia sẻ
Avatar lehoangnnx @lehoangnnx
thg 11 7, 2019 1:59 SA

Cảm ơn bạn. Nhưng cách này đâu dùng cho file kiểu như:

/*
 ** assets/js/main.js
 */
 require('./a.js')
 require('./b.js)
 console.log('File JS main');

đúng không bạn? Có require .

Mình vẫn chưa hiểu làm sao build file JS của mình trên NuxtJS nữa 😅

Avatar TAMIX @tuananhbfs
thg 11 7, 2019 2:03 SA

@lehoangnnx trong file js thì bạn require thoải mái mà. require cũng chẳng qua là 1 đoạn script - nhưng dc viết ra file khác để dễ quản lý và chuyên biệt tính năng. require('./a.js') require('./b.js) tương đương với 1 file mà bạn copy cả a và b vào

Avatar lehoangnnx @lehoangnnx
thg 11 7, 2019 2:32 SA

@tuananhbfs ủa mà cách thêm js vào phần script trên head nó có hiểu require không ta, để mình thử xem. tại mình nghĩ require thì phải build mới được.

Avatar TAMIX @tuananhbfs
thg 11 7, 2019 3:19 SA

@lehoangnnx à sorry bạn. dùng import thay cho require nhé

Avatar lehoangnnx @lehoangnnx
thg 11 7, 2019 4:21 SA

@tuananhbfs oke cảm ơn bạn nha, để mình làm thử xem sao.

Đã trả lời thg 11 3, 2019 4:20 SA
0

Các pro giúp với ạ, tìm hiểu các kiểu mà vẫn chưa ra 😢

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí