Как импортировать node_modules в машинописи, используя Vue CLI 3 созданный проект? - PullRequest
Новая
       14

Как импортировать node_modules в машинописи, используя Vue CLI 3 созданный проект?

0 голосов
/ 15 декабря 2018

Я создал проект Vue.js, используя Vue CLI 3 и включил машинописный текст, и пытаюсь заставить работать Cesium.

Я выполнил следующее: 

npm install cesium
npm install @types/cesium

Нокогда я выполняю, 

npm run serve

, я вижу штраф с цезиевым глобусом, за исключением того, что в коде VS я получаю 

Cannot find module cesium/Cesium

для всего моего импорта цезия

Соответствующие файлы можно найти ниже.

Cesium.vue: 

<template>
    <div id="cesiumContainer"></div>
</template>

<script lang='ts'>
import Vue from 'vue';
import Cesium from 'cesium/Cesium';

export default Vue.extend({
  name: 'Cesium',
  data() {
    return {
      //   viewer: null,
    };
  },
  mounted() {
    let viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: Cesium.createTileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
      }),
      baseLayerPicker: false,
      geocoder: false,
      // requestRenderMode: true
      // skyBox: false
    });
  },
});
</script>

<style>
#cesiumContainer {
  /* width: 100%; */
  /* height: 100%; */
  width: 1024;
  height: 768;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

main.ts: 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import Cesium from 'cesium/Cesium';
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css';
Vue.use(Cesium);
Vue.use(widget);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

vue.config.js: 

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

const debug = process.env.NODE_ENV !== 'production';
let cesiumSource = './node_modules/cesium/Source';
let cesiumWorkers = '../Build/Cesium/Workers';
module.exports = {
  baseUrl: '',
  devServer: {
    port: 8080,
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' ',
    },
    amd: {
      toUrlUndefined: true,
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
      ]),
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, 'ThirdParty/Workers'),
          to: 'ThirdParty/Workers',
        },
      ]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./'),
      }),
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false,
    },
  },
};

мой tsconfig.json включает в себя: 

{
  "compilerOptions": {
    "types": ["cesium"],
}

Что я делаю не так ?? *

...