Vấn đề về Webpack và NuxtJS
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
Bạn đọc kĩ hơn ở phần này nhé! https://nuxtjs.org/api/configuration-build
Ở extend
có 2 tham số config
và ctx
, 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ì )
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.
@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.
à nếu câu 1 của mình đúng thì bạn accept answer giúp mình nhe @lehoangnnx
@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.
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
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,
},
]
},
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
@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
@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.
@lehoangnnx à sorry bạn. dùng import thay cho require nhé
@tuananhbfs oke cảm ơn bạn nha, để mình làm thử xem sao.