Webpack cho phép bạn tải HTML giống như bạn tải bất kỳ mã nào khác. Điều này cho phép bạn thực hiện những việc như yêu cầu hình ảnh hoặc đồ họa vector trong các mẫu của mình, xử lý trước chúng bằng cách sử dụng ngôn ngữ tạo khuôn mẫu mà bạn chọn như ngọc bích hoặc thanh điều khiển, đồng thời tối ưu hóa việc tải và sử dụng lại các mẫu bằng bộ nhớ đệm mẫu
Tải HTML yêu cầu trình tải html, trình này sẽ phân tích cú pháp HTML và trả về dưới dạng một hàm có giá trị chuỗi html của mẫu của bạn. Bạn có thể sử dụng chức năng đó ở những nơi lấy chuỗi html, chẳng hạn như template
hoặc trong $compile
Chuẩn bị tải HTML
Cài đặt bộ nạp. npm install html-loader --save-dev
Trong gói web. cấu hình. js, bạn có thể thêm cấu hình trình tải sau
gói web. cấu hình. js
Đang tải tệp HTML
Tải tệp HTML đơn giản như tải bất kỳ tệp nào
chủ yếu. js
thành phần. js
import './component.html';
import myComponent from './myComponent.js';
angular
.module['myDirectives', []]
.directives['myComponent', myComponent];
Ghi chú. Tất nhiên bạn có thể làm điều này với cả CommonJS và AMD
Nếu bạn giống tôi, thì việc điều hướng các lĩnh vực của các đường ống biên dịch và biên dịch phức tạp không làm bạn bối rối, nhưng nó chỉ khiến bạn mệt mỏi
Gần đây, tôi đang làm việc trên một API dựa trên ExpressJS, không có máy chủ [được viết bằng TypeScript, được biên dịch thành ES2017 bằng cách sử dụng trình tạo mã mô-đun commonJS, sau đó babel được dịch sang nút 6. 10. 3], tôi đã phải thêm một tính năng để gửi email theo khuôn mẫu HTML khi có sự kiện webhook. Tất nhiên, điều này có nghĩa là gộp các mẫu HTML vào bản dựng
Đây là một con thú lớn hơn tôi tưởng tượng lúc đầu. Tôi có thể đọc các tệp bằng thứ gì đó như
declare module '*.html' {
const value: string;
export default value
}
1 và hầu hết sẽ mỉm cười và gật đầu với điều đó, nhưng điều tôi thực sự muốn là chỉ cần declare module '*.html' {
const value: string;
export default value
}
2 tệp và có thể sử dụng nó mà không cần xử lý thêmVấn đề tồn tại ở hai phần, một trong hai phần có thể liên quan đến bạn. Đầu tiên là làm cho TypeScript đồng ý rằng việc nhập tệp HTML là cần thiết. Thứ hai là làm cho mã đầu ra cuối cùng thực sự đọc HTML
Nếu bạn bắt đầu với tuyên bố
import html from 'template.html'
Sau đó, bạn sẽ được chính xác. Thật không may, TypeScript không đồng ý. Nhưng chúng ta có thể giải quyết vấn đề này
Sửa độ phân giải mô-đun TypeScript KHÔNG CÓ Commonjs
Tôi sẽ bắt đầu với điều này, trong trường hợp bất kỳ ai ở đây đang tạo mã lớn hơn ES5 với việc tạo mô-đun ES2015. Điều này đủ đơn giản, bởi vì TypeScript sẽ biến câu lệnh
declare module '*.html' {
const value: string;
export default value
}
2 thành câu lệnh declare module '*.html' {
const value: string;
export default value
}
2 và do đó bạn có thể sử dụng bất kỳ chiến lược nhập html ES6 đã thiết lập nào. Bạn chỉ cần làm tờ khai TS file declare module '*.html' {
const value: string;
export default value
}
5 gồm các nội dung bên dướideclare module '*.html' {
const value: string;
export default value
}
Và thế là TypeScript được xoa dịu
Sửa độ phân giải mô-đun TypeScript VỚI commonjs
Cái này phức tạp hơn, bởi vì chúng tôi đang sử dụng các thế hệ mô-đun Commonjs, giải pháp trên sẽ biến câu lệnh nhập của chúng tôi
import html from 'template.html'
vào cái này
var html = require['template.html'].default
Phần quan trọng ở đây là
declare module '*.html' {
const value: string;
export default value
}
6. Tôi không biết bạn thế nào, nhưng các mẫu HTML của tôi không thực sự là các đối tượng Javascript có thuộc tính declare module '*.html' {
const value: string;
export default value
}
7 chứa HTML thực của tôi và tôi không muốn chúng làNhưng, có một cách. Nhờ một chút khai thác vấn đề GitHub và nhờ , giải pháp khá đơn giản. bạn chỉ cần tạo cùng một tệp khai báo TS
declare module '*.html' {
const value: string;
export default value
}
5 mà không cần xuất mặc định, như vậydeclare module '*.html';
Bây giờ báo cáo nhập khẩu của bạn nên kiểm tra. Và hơn thế nữa, câu lệnh nhập của bạn sẽ biên dịch thành này
var module = require['template.html']
Điều này là tốt, bởi vì nó đúng về mặt kỹ thuật. Tuy nhiên, điều tệ là javascript không biết cách yêu cầu tệp html
Yêu cầu HTML với Babel
Bạn có thể bắt đầu với thứ gì đó như văn bản yêu cầu, nhưng kiểu đó sẽ đánh bại mục đích của những gì chúng tôi đang cố gắng đạt được ở đây. Chúng tôi muốn
declare module '*.html' {
const value: string;
export default value
}
2-và-quênTôi lấy cảm hứng từ plugin babel biến đổi-html-nhập-thành-chuỗi của yeiniel, plugin này sẽ biến một câu lệnh như thế này
import html from 'template.html'
vào cái này
var html = 'Hello
'
trong quá trình dịch mã. Điều đó khá tuyệt. Nhưng chúng tôi không còn có
declare module '*.html' {
const value: string;
export default value
}
2 nữa [trừ khi bạn là một trong những đứa trẻ không bình thường mà tôi nghe kể], chúng tôi có một import html from 'template.html'
1, vì vậy plugin này không đủ. Để đạt được mục tiêu này, tôi đã sửa đổi plugin của yeiniel và tạo plugin của riêng mình, plugin này đạt được mục đích giống nhau, nhưng cho cả declare module '*.html' {
const value: string;
export default value
}
2 và import html from 'template.html'
1Chỉ cần đưa
import html from 'template.html'
4 hoàn toàn không dài dòng đó vào đường dẫn plugin babel của bạn và những gì bạn sẽ có làimport html from 'template.html
được biên dịch qua TypeScript vào cái này
var module = require['template.html']
và sau đó được biên dịch bởi babel thành cái này
declare module '*.html' {
const value: string;
export default value
}
0và Voila. Miền đất hứa. Chắc chắn, đối với các tệp HTML lớn, nó làm cho mã được tạo của bạn trông hơi tệ, nhưng dù sao thì chúng cũng trông rất tệ nên ai phàn nàn. Bây giờ khi tôi muốn gửi email bằng mẫu HTML, tôi chỉ cần nhập nó và sử dụng nó