Các chi tiết cơ bản của việc tích hợp quy trình giao diện người dùng mới sáng bóng của chúng tôi vào dự án Django của chúng tôi—và sử dụng nó để tạo một số ứng dụng "Xin chào thế giới" đơn giản với webpack, React và Vue
Cập nhật mới nhất. tháng 10 năm 2022
[email protected] dev /mysite > webpack --mode development Hash: c8fe6998ff64fdc5e0bb Version: webpack 4.43.0 Time: 57ms Built at: 06/24/2020 11:02:15 AM Asset Size Chunks Chunk Names index-bundle.js 3.96 KiB main [emitted] main Entrypoint main = index-bundle.js [./assets/index.js] 171 bytes {main} [built] 1 và hai cài đặt trước của chúng tôi, tất cả đều là phụ thuộc phát triển
npm init -y
npm install webpack webpack-cli --save-dev
Tiếp theo, chúng tôi phải yêu cầu webpack sử dụng cài đặt trước này để xử lý các tệp của chúng tôi. Điều này được thực hiện thông qua một. Chúng tôi chỉ cần thêm phần sau vào
const path = require['path'];
module.exports = {
entry: './assets/index.js', // path to our input file
output: {
filename: 'index-bundle.js', // output bundle file name
path: path.resolve[__dirname, './static'], // path to our Django static directory
},
};
npm init -y
npm install webpack webpack-cli --save-dev
Tóm tắt bằng tiếng Anh là. "sử dụng cài đặt trước env và phản ứng của Babel để biên dịch tất cả. js và. jsx không nằm trong thư mục node_modules"
Ok, bây giờ chúng ta đã sẵn sàng để dùng thử ứng dụng React hello world của mình
Đầu tiên thêm các
vào mẫu Django của bạn trong [và trước khi bao gồm tệp gói] như vậy.
npm init -y
npm install webpack webpack-cli --save-dev
Tiếp theo chúng ta cần cài đặt React và ReactDOM
npm init -y
npm install webpack webpack-cli --save-dev
Bây giờ chúng ta có thể cập nhật tệp
"scripts": {
[other stuff here]
"dev": "webpack --mode development --watch"
},
npm init -y
npm install webpack webpack-cli --save-dev
Chạy lại
const path = require['path'];
module.exports = {
entry: './assets/index.js', // path to our input file
output: {
filename: 'index-bundle.js', // output bundle file name
path: path.resolve[__dirname, './static'], // path to our Django static directory
},
};
Xin chúc mừng, giờ bạn đã có một ứng dụng Django-React lai
Thiết lập Vue. js với Babel
Ok, vì vậy có thể bạn không thực sự muốn sử dụng cả React và Vue trong cùng một ứng dụng Django, nhưng giả sử vì lý do nào đó bạn quyết định sử dụng
Cả hai dự án đều cực kỳ cố chấp về toàn bộ quy trình xây dựng và vì vậy việc tìm ra cách sử dụng chúng cùng nhau có thể là một cơn ác mộng. Nhưng bây giờ chúng ta đã hiểu hết về JavaScript nguyên thủy hiện đại của mình, đây thực sự là một nhiệm vụ dễ dàng
Vue có định dạng tệp được đề xuất riêng—một định dạng bao gồm các mẫu trông giống html hơn là JSX nhưng vẫn không hoàn toàn giống nhau, cũng như một số JavaScript và kiểu
Đây là lời chào của Vue. ví dụ vue
npm init -y
npm install webpack webpack-cli --save-dev
Dù sao, không đi vào quá nhiều chi tiết, điểm chính là giống như JSX, các trình duyệt không biết phải làm gì với định dạng này. Vì vậy, giống như React, chúng ta phải chuyển nó qua trình biên dịch
Rất may, điều này đơn giản như cài đặt Vue và trình biên dịch mới [trong trường hợp này là
$ npm run dev
> [email protected] dev /mysite
> webpack --mode development
Hash: c8fe6998ff64fdc5e0bb
Version: webpack 4.43.0
Time: 57ms
Built at: 06/24/2020 11:02:15 AM
Asset Size Chunks Chunk Names
index-bundle.js 3.96 KiB main [emitted] main
Entrypoint main = index-bundle.js
[./assets/index.js] 171 bytes {main} [built]
const path = require['path'];
module.exports = {
entry: './assets/index.js', // path to our input file
output: {
filename: 'index-bundle.js', // output bundle file name
path: path.resolve[__dirname, './static'], // path to our Django static directory
},
};
npm init -y
npm install webpack webpack-cli --save-dev
Bây giờ chúng ta có thể thêm một tệp
$ npm run dev
> [email protected] dev /mysite
> webpack --mode development
Hash: c8fe6998ff64fdc5e0bb
Version: webpack 4.43.0
Time: 57ms
Built at: 06/24/2020 11:02:15 AM
Asset Size Chunks Chunk Names
index-bundle.js 3.96 KiB main [emitted] main
Entrypoint main = index-bundle.js
[./assets/index.js] 171 bytes {main} [built]
Hãy thử tự thiết lập điều này theo ví dụ về React và xem bạn có làm được không
Cái gì tiếp theo?
Chúng tôi đã hoàn thành với công cụ. Tuy nhiên, đây không phải là kết thúc của hướng dẫn
Tiếp theo là phần thú vị. cuối cùng chúng ta cũng có thể nhận được mã hóa
Trong Phần 4, chúng ta sẽ sử dụng các ví dụ thực tế để bắt đầu xây dựng các ứng dụng thực trong kiến trúc mới của mình. Chúng tôi sẽ đề cập đến những thứ như tương tác với API, truyền thông tin giữa mặt sau và mặt trước, tạo thư viện có thể sử dụng lại, v.v.