Sử dụng webpack, ví dụ bajs và kiểu chữ?

Question

Tôi đang gặp nhiều rắc rối khi tải nội dung trong các ví dụ của bajj (như EffectComposer hoặc Detector) để làm việc với webpack và bản ghi.

Trước hết các tệp *.d.ts có liên quan đều có sẵn và được cài đặt qua tsd. Vấn đề của tôi là nhận được webpack để thực sự bao gồm các tập tin bên ngoài của xây dựng baj mặc định (cụ thể là những điều trong examples/js/).

Với three cài đặt từ NPM tôi có thể làm một cái gì đó giống như

import THREE = require('three'); 

nào hoạt động tốt nhưng lại thiếu một trong các goodies nói trên. Có một vài gói bajs khác trên npm mà các plugin bó nhưng tôi không nghĩ rằng chúng hoạt động với các kiểu chữ (vì require('three-js')(['EffectComposer']) bị từ chối bởi trình biên dịch bản ghi.)

Có ai đó nhận được một thứ gì đó trong gói này (như xử lý hậu kỳ) để làm việc với nguyên cảo?

Answer 1

Đây là những gì phù hợp với tôi.

$ npm install --save-dev exports-loader imports-loader 

Sau đó, để sử dụng một cái gì đó từ three/examples/js, tôi làm điều này:

const THREE = require('three'); 
// imports provides THREE to the OrbitControls example 
// exports gets THREE.OrbitControls 
THREE.OrbitControls = require('imports?THREE=three!exports?THREE.OrbitControls!../../node_modules\/three\/examples\/js\/controls\/OrbitControls'); 

// use THREE.OrbitControls ... 

Tôi nghĩ rằng điều đúng đắn nên làm là sử dụng imports và exports bộ tải by config thay vì nhúng chúng trong yêu cầu. Tôi sẽ cập nhật câu trả lời này khi tôi có một ví dụ.

Answer 2

tôi sẽ cố gắng trả lời chỉ là một phần của câu hỏi của bạn liên quan đến nguyên cảo và hội nhập ThreeJS trong IDE của bạn.

Như bạn đã thấy, hầu hết các thành phần được lưu trữ trên các tài liệu lưu trữ DefinitelyTyped. tôi khuyên bạn nên ngừng sử dụng tsd và di chuyển đến typing.

Một số cơ bản typings.json mà typing sẽ tiêu thụ được liệt kê bên dưới. Nó nhận được baJS chính mới nhất và thư viện trình soạn thảo hiệu ứng được TypeScript nhận diện. Lưu ý thẻ bắt đầu bằng # cam kết sẽ thay đổi khi số .tsd phát triển.

{ 
    "ambientDependencies": { 
    "three": "github:DefinitelyTyped/DefinitelyTyped/threejs/three.d.ts#c6c3d3e65dd2d7035428f9c7b371ec911ff28542", 
    "three-projector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-projector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", 
    "three-detector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-effectcomposer.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", 
    "three-effectscomposer": "github:DefinitelyTyped/DefinitelyTyped/threejs/detector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", 
    "three-shaderpass": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-shaderpass.d.ts#ee05b1163d8da7f16719f08d52f70ab524f1003a" 
    } 
} 

Đính kèm là ảnh chụp nhanh của IDE công nhận các phương pháp công khai của EffectsComposer. Bạn cũng có thể muốn thử nghiệm với các khả năng trình nạp mô-đun khác nhau của TypeScript.

Answer 3

Tôi đã có thể gói OrbitControls với (webpack v2 + ts-loader) và không có trình tải khác.

package.json:

"dependencies": { 
    "three": "^0.85.2", 
    "@types/three": "^0.84.12", 
    "ts-loader": "^2.1.0", 
    "typescript": "^2.3.4", 
    "webpack": "^2.6.1" 
}, 

entrypoint.ts:

import * as THREE from "three"; 

// OrbitControls.js expects a global THREE object 
(window as any).THREE = THREE; 

// NOTE: OrbitControls must be included with require: 
// using "import" cause it to be executed before global THREE becomes available 
require("three/examples/js/controls/OrbitControls"); 

// ... code that uses THREE and THREE.OrbitControls 

LƯU Ý: webpack có thể cảnh báo như "export 'OrbitControls' (imported as 'THREE') was not found in 'three', vì OrbitControls.js không phải là một mô-đun JS thích hợp. Tôi cho rằng chúng ta có thể bỏ qua cảnh báo này.

Answer 4

Tôi đã quản lý để tìm một cách khá rõ ràng để thiết lập điều này trong webpack.config.js.

Như mỗi câu trả lời của Dan:

$ npm install --save-dev imports-loader

Hóa ra chúng ta không thực sự cần exports-loader, kể từ khi three.js ví dụ thêm nhà thầu của họ đến đối tượng THREE.

Sau đó, trong webpack.config.js, chúng ta có thể thêm một quy tắc để thêm var THREE = require('three'); đến một module nhập khẩu nếu con đường của mô-đun giải quyết bất cứ điều gì có chứa three/examples/js:

module: { 
    rules: [ 
    ... 
    { 
     test: /three\/examples\/js/, 
     use: 'imports-loader?THREE=three' 
    } 
    ] 
} 

Bây giờ các module ví dụ sẽ tìm ra BA toàn cầu khi họ mong đợi nó.

Sau đó, để thực hiện nhập khẩu ví dụ một chút ít verbose:

resolve: { 
    alias: { 
    'three-examples': path.join(__dirname, './node_modules/three/examples/js') 
    }, 
    ... 
}, 

này giả định rằng webpack.config.js là trong cùng thư mục với node_modules, điều chỉnh cho phù hợp.

Bây giờ, chúng ta có thể sử dụng các tập tin ví dụ như vậy:

import * as THREE from 'three'; 
import 'three-examples/controls/OrbitControls'; 

để nhập khẩu các mô-đun cho tác dụng phụ của nó.