ES6 bare module 를 로 컬 프로그램 에 어떻게 도입 하 는 지, 3DTilesRendererJS 통합 문제 해결 방안 탐색

최근 NASA 의 3DTile 해석 렌 더 링 코드 를 자신의 프로그램 에 통합 하려 고 github 에서 clone 했 습 니 다.
git+https://github.com/NASA-AMMOS/3DTilesRendererJS.git 관련 코드
시범 코드 를 실행 할 때 다음 과 같은 문제 가 발생 합 니 다.
“Uncaught SyntaxError: Cannot use import statement outside a module”
인용 파일 이 class 를 도 입 했 기 때문에 ES6 에서 module 에서 정 의 된 개념 으로 script 에 추가 해 야 합 니 다. type = "module" 만 브 라 우 저가 스 크 립 트 를 정확하게 해석 할 수 있 습 니 다. 다음 과 같 습 니 다.

 

< p > 브 라 우 저 는 스 크 립 트 를 분석 할 수 있 지만, 이어서 실행 하면 다음 과 같은 오류 가 발생 합 니 다 < / p >

“Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6”

         ：

< p > 제3자 에서 ES6 모듈 을 가 져 올 때 브 라 우 저 로 만 동기 화 할 수 없습니다. < /p>
< p > import 를 사용 하여 관련 모듈 을 가 져 올 때 bare 를 사 용 했 기 때 문 입 니 다. import, 예: < / p >

import { LineSegments, BufferGeometry, Vector3, BufferAttribute, LineBasicMaterial } from 'three';

< p > 예: 위 에서 가 져 온 'three', < / p >

 bare import 는 웹 팩 과 같은 묶음 기 를 사용 할 때 흔히 볼 수 있 는 가 져 오기 입 니 다. node modules 의 상대 경 로 를 가리 키 는 것 이 아니 라 포장 발표 경 로 를 표시 합 니 다. 예 를 들 어 웹 팩 포장 을 통 해 발 표 된 후 정상적으로 작업 할 수 있 습 니 다. 단, 브 라 우 저 에서 직접 실행 하면 < / p > 를 볼 수 있 습 니 다.

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

< h2 > 솔 루 션: < / h2 >
< h3 > 1) 온라인 라 이브 러 리 를 직접 참조 합 니 다. 일부 라 이브 러 리 는 온라인 패키지 로 발 표 된 주소 가 있 습 니 다. < / h3 >

import * from "https://code.jquery.com/jquery-3.1.1.min.js"

< h3 > 2) 웹 팩 으로 포장 합 니 다. 이것 은 비교적 번 거 롭 습 니 다 < / h3 >

1. `npm install --save-dev webpack webpack-cli copy-webpack-plugin webpack-dev-server `

2. Create  webpack.config.js :

   const path = require('path');
   const CopyPlugin = require('copy-webpack-plugin');
   
   module.exports = {
       entry: './src/app.js',
       mode: 'development',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'app.js'
       },
       devServer: {
           contentBase: './dist'
       },
       plugins: [
           new CopyPlugin([
               { from: 'src/index.html', to: './' },
               { from: 'src/style.css', to: './' },
           ]),
       ],
   };

3. Add a script to the  package.json :  "dev": "webpack-dev-server --open"

4. The import can now look like this:

   import { html, LitElement } from 'lit-element/lit-element.js';

Run the dev-server with live-reload (similar to browser-sync) with  npm run dev .

After trying it for a small application and really only doing the bare minimum with Webpack, I have to say it is a viable option. But it requires to download some dependencies from NPM and create a  webpack.config.js .

3）Open Web Components (OWC)

Open Web Components offer a simple dev-server that does nothing more than rewrite the bar module imports to relative imports.

npm install --save-dev owc-dev-server

After trying it out, I was disappointed to find that the dev-server does not offer live-reloading.

The best solution I found was to combine it with browser-sync. Here are the scripts I added to my  package.json

"dev": "owc-dev-server | npm run watch",
"watch": "browser-sync start -f src/ --proxy localhost:8080 --startPath src",

Note that  watch  is just a helper-script used by  dev ; so you have to use  npm run dev .

4）Polymer-cli

The last tool I tried was Polymer-CLI. In the end, the approach is a mix between the previous two. It requires an additional  polymer.json  config-file and it also does not function without browser-sync.

The steps are:

1. npm install --save-dev polymer-cli

2. Create  polymer.json :

   {
       "entrypoint": "src/index.html",
       "shell": "src/app.js",
       "npm": true
   }

3. Set up scripts:

   "watch": "browser-sync start -f src/ --proxy localhost:8000 --startPath src",
   "dev": "polymer serve --open-path src/index.html | npm run watch"

< p > 이상 의 이 방법 들 은 참고 할 수 있 습 니 다.http://dplatz.de/blog/2019/es6-bare-imports.html