Tệp javascript bên ngoài Django

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

Chào mừng đến với Phần 3

Trong trường hợp bạn bỏ lỡ—trong Phần 1, chúng tôi đã đề cập đến cách tổ chức cơ sở mã JavaScript bên trong dự án Django và trong Phần 2, chúng tôi đã cung cấp một khóa học cơ bản về công cụ JavaScript

Và bây giờ cuối cùng chúng ta cũng bắt đầu nhận được phần thưởng. các vấn đề cơ bản của việc tích hợp một quy trình JavaScript hiện đại vào dự án Django của chúng tôi

Trong phần này, cuối cùng chúng ta sẽ dừng lại với lý thuyết, xắn tay áo lên và bắt đầu xây dựng. Đến cuối hướng dẫn này, chúng ta sẽ có một ứng dụng React và một ứng dụng Vue chạy vui vẻ cùng nhau trong cùng một dự án Django

Âm thanh vui vẻ?

JavaScript và Django sẽ tích hợp như thế nào

Hãy bắt đầu với thiết lập hình ảnh lớn

Về cơ bản, chúng ta sẽ tạo một môi trường độc lập, riêng biệt bên trong dự án Django của chúng ta

Sau đó, để tích hợp với Django, các đầu ra (bạn có nhớ các tệp gói đó không?) sẽ là các tệp tĩnh mà chúng tôi sẽ thả vào các mẫu của mình ở bất cứ đâu chúng tôi cần. Điều này sẽ cho phép chúng tôi tạo mọi thứ từ các ứng dụng một trang, đến các thư viện JavaScript có thể sử dụng lại trong khi vẫn duy trì công cụ Django và JavaScript tốt nhất

Kế hoạch của chúng tôi. thiết lập một đường dẫn JavaScript trong dự án Django của chúng tôi và sử dụng các tệp đầu ra làm tài sản tĩnh trong hệ thống mẫu/chế độ xem của Django

Hy vọng rằng điều này có ý nghĩa, nhưng nếu không, chúng ta sẽ đạt được điều đó thông qua một số ví dụ cụ thể

Đặt ra dự án của bạn

Ok, đầu tiên là những điều cơ bản. để đồ ở đâu

Ở cấp độ cao, chúng tôi khuyên bạn nên đặt dự án JavaScript của mình thành thư mục con trong thư mục gốc của dự án Django lớn hơn của bạn. Hướng dẫn này sử dụng một thư mục có tên là

npm init -y
npm install webpack webpack-cli --save-dev

8 cho các tệp nguồn giao diện người dùng, mặc dù bạn cũng có thể sử dụng

npm init -y
npm install webpack webpack-cli --save-dev

9,

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

0 hoặc bất kỳ thứ gì bạn thực sự muốn

Dự án JavaScript là nơi bạn sẽ phát triển giao diện người dùng của mình—nhưng hãy nhớ rằng Django sẽ chỉ hoạt động với các kết quả đầu ra do trình đóng gói tạo ra. Vì vậy, ngoài thư mục

npm init -y
npm install webpack webpack-cli --save-dev

8 của chúng tôi, chúng tôi cũng sẽ kết xuất các kết quả đầu ra ở đâu đó mà hệ thống tệp tĩnh của Django có thể tìm thấy chúng. Một mặc định tốt cho điều này là thư mục

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

2 cấp gốc được đặt tên phù hợp

Đây là cách cấu trúc đó có thể tìm kiếm một dự án cơ bản được mô phỏng theo hướng dẫn Django

├── manage.py
├── mysite
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── myapp      <----- a normal Django app
│   ├── __init__.py
│   ├── models.py
│   ├── urls.py
│   └── views.py
├── assets     <----- our front-end project source
│   ├── javascript
│   └── styles
├── static     <----- our front-end project outputs (and other Django static files)
│   ├── css
│   ├── images
│   └── js  
└── templates  <----- our Django template files
    └── myapp

Cấu trúc dự án cho dự án Django lai của chúng tôi, dựa trên

Hy vọng cách bố trí trên có ý nghĩa. Một lưu ý về bố cục trên là nó đặt tất cả các mẫu Django trong một thư mục độc lập, theo khuyến nghị của Two Scoops of Django

Các thư mục chính mà chúng ta sẽ nói đến cho mục đích của hướng dẫn này là

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

3 và

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

4

Thiết lập webpack bên trong dự án Django của bạn

Trong phần 2, chúng tôi đã đề cập đến cách chúng tôi sẽ sử dụng webpack để nhóm các tệp nguồn JavaScript của chúng tôi thành một tệp mà chúng tôi có thể sử dụng trong các mẫu Django của mình

Webpack là chất kết dính (hay chuỗi?) sẽ kết hợp mã giao diện người dùng của chúng ta lại với nhau

Bây giờ chúng ta đã có cấu trúc dự án của mình, chúng ta có thể thiết lập webpack để làm những gì chúng ta muốn—cụ thể là xây dựng nội dung trong

npm init -y
npm install webpack webpack-cli --save-dev

8 và thả các gói vào

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

2

Chúng tôi sẽ đề cập đến cách tạo các gói cấp độ trang sau, nhưng bây giờ, hãy giả sử rằng chúng tôi sẽ gộp toàn bộ giao diện người dùng của mình vào một tệp khổng lồ có tên là

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

7

Để bắt đầu, chúng ta sẽ làm theo những điều cơ bản từ hướng dẫn bắt đầu sử dụng Webpack

Trước tiên hãy khởi tạo một dự án npm mới trong thư mục gốc của dự án Django của bạn và cài đặt webpack

npm init -y
npm install webpack webpack-cli --save-dev

Điều này sẽ tạo ra các tệp

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

8 và

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

9 cũng như một thư mục

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
  },
};

0 nơi các phụ thuộc thư viện JavaScript của chúng tôi sẽ đi. Hai cái đầu tiên nên được duy trì bởi hệ thống kiểm soát phiên bản của bạn, trong khi cái sau nên được bỏ qua

Tiếp theo, tạo một tệp có tên

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
  },
};

1 và cung cấp cho nó những nội dung này

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

Đây sẽ là "thế giới xin chào" của chúng tôi được thiết lập để xác nhận rằng mọi thứ đang hoạt động

Bước tiếp theo của chúng tôi sẽ là tạo một tệp cấu hình webpack. Tạ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
  },
};

2 trong thư mục gốc của dự án Django của bạn và cung cấp cho nó những nội dung này

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
  },
};

Cuối cùng, chúng ta sẽ thêm một npm script target để chạy webpack. Trong

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello webpack';
  return element;
}
document.body.appendChild(component());

8 thêm dòng sau vào phím

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
  },
};

4

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

Bây giờ chúng tôi chạy

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
  },
};

5 để thực thi tập lệnh webpack của chúng tôi. Nếu mọi việc suôn sẻ, bạn sẽ thấy kết quả như thế này và tệp

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
  },
};

6 của bạn sẽ được tạo

$ 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]

Nếu đầu ra của bạn trông như thế này thì mọi thứ đã được thiết lập đúng cách

chúc mừng. Bây giờ bạn có một đường dẫn JavaScript

Kết nối gói webpack của bạn với Django

Bây giờ, tất cả những gì còn lại phải làm là thả tệp gói của chúng tôi vào bất kỳ mẫu Django nào dưới dạng tệp tĩnh bình thường. Đây là tất cả Django 101 tiêu chuẩn, nhưng để hoàn thiện, hãy chỉ ra cách thực hiện điều đó

Mẫu cơ bản (hãy gọi nó là

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
  },
};

7) sẽ giống như thế này

{% load static %}


  
    Getting Started with Django and Webpack
  
  
    
  

Tham khảo tệp gói webpack của bạn trong mẫu Django

Bạn có thể cung cấp mẫu bằng cách thêm mẫu này vào tệp

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
  },
};

8

urlpatterns = [
  # other patterns here
  path('hello-webpack/', TemplateView.as_view(template_name='hello_webpack.html'))
]

Điều này giả định rằng

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
  },
};

7 có sẵn từ. Bạn cũng có thể cần đảm bảo rằng mình đang phục vụ đúng cách các tệp ra khỏi thư mục tĩnh bằng cách thêm phần sau vào

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

0

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Đảm bảo thư mục gốc

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

1 của bạn có thể được tìm thấy bởi công cụ tệp tĩnh của Django

Khi bạn đã thiết lập mọi thứ đúng cách, hãy truy cập

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

2 và bạn sẽ thấy thông báo "hello webpack" rất thú vị từ

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

3

hoan hô. Giờ đây, bạn đã có một quy trình giao diện người dùng được nhúng trong ứng dụng Django của mình

Làm việc với các thư viện JavaScript bên ngoài bằng NPM

Ok, cho đến nay chúng tôi đã không thực sự làm bất cứ điều gì hữu ích. Vì vậy, hãy bắt đầu khám phá một số lợi ích của việc thiết lập quy trình đầu cuối này

Điều đầu tiên chúng ta có thể muốn làm là sử dụng một thư viện. Hãy tiếp tục với hướng dẫn webpack và sử dụng thư viện tiện ích lodash trong tệp

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

3 của chúng tôi

Để làm điều này, trước tiên chúng ta sẽ cài đặt nó qua npm

npm install --save lodash

Bây giờ chúng tôi có thể cập nhật tệp

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

3 của mình để sử dụng

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

6 để tạo phần tử của chúng tôi

npm init -y
npm install webpack webpack-cli --save-dev

0

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
  },
};

5 để tạo lại tệp gói và tải lại trang. Nếu bạn đã làm đúng, bây giờ bạn sẽ thấy "Xin chào lodash" thay vì "Xin chào gói web"

Và bây giờ chúng ta có thể làm việc với các thư viện JavaScript bên ngoài. Bạn có thể lặp lại quy trình này cho bất kỳ thư viện nào khác mà bạn muốn sử dụng

Thiết lập React với Babel

Ok, cho đến nay rất tốt. Nhưng chúng tôi vẫn chưa làm bất cứ điều gì thực sự nâng cao—về cơ bản chúng tôi vẫn đang sử dụng vanilla JavaScript và chỉ thay đổi một số thứ xung quanh

Vì vậy, bây giờ chúng ta hãy ưa thích. Cuối cùng, hãy tích hợp ứng dụng React đó vào dự án của chúng ta

Như chúng tôi đã đề cập một cách đáng yêu trong phần giới thiệu của hướng dẫn này—React sử dụng một ngôn ngữ gọi là JSX để tạo khuôn mẫu cho nó

JSX là ngôn ngữ được thiết kế để cho phép bạn dễ dàng sử dụng HTML trong mã JavaScript. Nó hầu như giống HTML nhưng hơi khác và có nhiều quan điểm hơn theo những cách có thể gây nhầm lẫn và bực bội khi bạn mới bắt đầu (ví dụ: thay đổi

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

8 thành

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

9 ở mọi nơi). Ồ và nó cũng cho phép bạn đưa JavaScript vào đó

JSX. đứa con yêu bị cấm đoán của HTML và JavaScript?

Dù sao đi nữa, các chi tiết của JSX không quá quan trọng

Phần quan trọng là các trình duyệt không biết cách nói JSX. Vì vậy, để sử dụng JSX trong quá trình phát triển, bạn phải biên dịch nó thành thứ mà trình duyệt hiểu được. Đây là nơi mà Babel—trình biên dịch JavaScript của chúng tôi—cuối cùng cũng xuất hiện

Babel có thể làm tất cả mọi thứ (một trong những lý do tốt nhất để sử dụng nó), nhưng một trong những điều đó là phân tích cú pháp các tệp JSX

Nó thực hiện điều này thông qua một hệ sinh thái phần bổ trợ và cụ thể hơn là thông qua các thiết lập được định cấu hình sẵn—được gọi là giá trị đặt trước—hoạt động tốt đối với một số loại ứng dụng nhất định. Ở đây, chúng tôi sẽ sử dụng env-preset và Reac-preset, mặc dù các cài đặt trước cũng tồn tại cho TypeScript và các hương vị JavaScript khác

Dù sao, những chi tiết đó không quá quan trọng và nó không phức tạp như âm thanh

Điều đầu tiên chúng tôi làm là cài đặt Babel (

$ 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]

0), trình tải gói web của nó

$ 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]

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

1

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
  },
};

2 của chúng tôi

npm init -y
npm install webpack webpack-cli --save-dev

2

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

3

Tiếp theo chúng ta cần cài đặt React và ReactDOM

npm init -y
npm install webpack webpack-cli --save-dev

4

Bây giờ chúng ta có thể cập nhật tệp

  "scripts": {
    (other stuff here)
    "dev": "webpack --mode development --watch"
  },

3 thành phiên bản React của hello world

npm init -y
npm install webpack webpack-cli --save-dev

5

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
  },
};

5 và làm mới trang của bạn. Bây giờ bạn hy vọng sẽ thấy "Xin chào, phản ứng. "

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

6

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]

5) và thêm một mục mới 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
  },
};

2 của chúng tôi

npm init -y
npm install webpack webpack-cli --save-dev

7

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]

7 như trên, biên dịch lại giao diện người dùng của chúng ta và voila. Xin chào Vue

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.

Làm cách nào để sử dụng tệp js bên ngoài trong Django?

Làm cách nào để thêm tệp JavaScript vào Django?