Asked Nov 2nd, 2019 4:19 PM 92 0 4
  • 92 0 4
0

Vấn đề về Webpack và NuxtJS

Share
  • 92 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 ANSWERS


Answered Nov 3rd, 2019 11:44 AM
Accepted
+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ì )

Share
lehoangnnx @lehoangnnx
Nov 3rd, 2019 2:04 PM

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.

0
| Reply
Share
Hoàng Đức Quân @devil_boom_129
Nov 3rd, 2019 2:17 PM

@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.

0
| Reply
Share
Hoàng Đức Quân @devil_boom_129
Nov 3rd, 2019 2:18 PM

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

0
| Reply
Share
lehoangnnx @lehoangnnx
Nov 3rd, 2019 3:11 PM

@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.

0
| Reply
Share
Answered Nov 3rd, 2019 11:54 AM
+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

Share
Answered Nov 6th, 2019 8:05 AM
+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,
	},
	]
},
Share
lehoangnnx @lehoangnnx
Nov 7th, 2019 1:59 AM

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 😅

0
| Reply
Share
Lê Tuấn Anh @tuananhbfs
Nov 7th, 2019 2:03 AM

@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

0
| Reply
Share
lehoangnnx @lehoangnnx
Nov 7th, 2019 2:32 AM

@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.

0
| Reply
Share
Lê Tuấn Anh @tuananhbfs
Nov 7th, 2019 3:19 AM

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

0
| Reply
Share
lehoangnnx @lehoangnnx
Nov 7th, 2019 4:21 AM

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

0
| Reply
Share
Answered Nov 3rd, 2019 4:20 AM
0

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

Share