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êm

Vấ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ưới

declare 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ậy

declare 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ên

Tô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'

1

Chỉ 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
}

0

và 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ó

Làm cách nào để tải trang HTML trong thành phần Góc?

Làm cách nào để tải tệp HTML trong TypeScript?

Làm cách nào để tải tệp HTML trong Angular 6?

Làm cách nào để tạo tệp HTML mới trong Angular?