Rollup + Svelte + typcript: не удалось использовать rollup-plugin-import-alias - PullRequest
Новая
       50

Rollup + Svelte + typcript: не удалось использовать rollup-plugin-import-alias

0 голосов
/ 12 января 2019

совместимость между некоторыми полезными подключаемыми плагинами (машинопись, import-alias, svelte)

пожалуйста, прочитайте ниже инструкции по установке:

  • накопительный-плагин-импорт-псевдоним
  • Накопительный-плагин-typescript2
  • Накопительный-плагин-стройный

Привет

может правильно собрать пакет свертки ... что не так в моей конфигурации?

Я хочу использовать следующие плагины:

  • rollup-plugin-typescript2: преимущество этой мощной системы типизации
  • rollup-plugin-import-alias: чтобы избежать импорта (черта-точка-косая точка-точка-косая черта ...) ад

Но что-то пошло не так ...

Либо Rollup обрабатывает модуль 'App.svelte' как внешнюю зависимость и не включает в себя результаты транспиляции 'App.svelte' внутри пакета, а те, которые приводят к TypeError: App не является конструктором во время выполнения,

Или: удаление расширения .svelte приводит к семантической ошибке плагина TypeScript rpt2: не удается найти приложение!

  • Как это исправить?
  • Важен ли порядок сортировки роликов?
  • Совместимы ли rollup-plugin-import-alias, rollup-plugin-svelte и rollup-plugin-typescript2 вместе?

Вот макет каталога: 

$ tree -I *node*

├── dist
│   ├── app.js
│   └── dts
│       └── main.d.ts
├── package.json
├── package-lock.json
├── public
│   ├── github-issue-rollup-plugins-import-alias-rpt2.md
│   ├── index.html
│   └── npm-things-to-install.txt
├── rollup.config.js
├── src
│   ├── App.svelte
│   ├── App.svelte.d.ts
│   ├── components
│   ├── main.ts
│   └── typings
│       └── svelte.d.ts
└── tsconfig.json

Вот мой файл tsconfig.json: 

{
  "compilerOptions" : {
    "target": "es5",
    "lib": [ "es2015", "dom" ],
    "noEmit" : true,
    "declaration": true,
    "declarationDir": "dist/dts",
    "baseUrl": ".",
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "#/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
      "node_modules/**"
    ]
  }

Вот rollup.config.js: 

import svelte from 'rollup-plugin-svelte'
import typescript from 'rollup-plugin-typescript2'
import tscompile from 'typescript'
import buble from 'rollup-plugin-buble'
import alias from 'rollup-plugin-import-alias'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import serve from 'rollup-plugin-serve'
import path from 'path'

import pkg from './package.json'

const { name, version, description, author, license } = pkg

const banner = `
/*
 *
 * ${name} - version ${version}
 *
 * ${description}
 *
 * by: ${author}
 * license: ${license}
 *
 */
`

const basePlugins = [

  typescript({
    verbosity: 2,
    typescript: tscompile,
    declaration: true,
    declarationDir: 'dist/dts',
    useTsconfigDeclarationDir: true
  }),

  alias({
    Extensions: ['.svelte', '.ts'],
    Paths: {
      '#': path.resolve(__dirname + '/src')
    }
  }),

  svelte({
    extensions: [ '.svelte'],
    include: ['src/**/*.svelte']
  }),

  buble({
    exclude: 'node_modules/**',
    objectAssign: 'Object.assign'
  }),

  commonjs(),

  resolve({
    jsnext: true,
    browser: true,
    main : true,
    preferBuiltins: false
  })
]

const devServerOptions = {
  open: true,
  openPage: '/index.html',
  contentBase: ['dist', 'public'],
  host: 'localhost',
  port: 8080
}

// use the first for watch/serve options
const devPlugins = [...basePlugins, serve(devServerOptions), banner]
// const devPlugins = [...basePlugins,  banner]

export default {
  input: 'src/main.ts',

  output: {
    name: 'orthonet-svelte',
    file: 'dist/app.js',
    format: 'umd',
    banner
  },

  plugins: devPlugins,

  watch:{
    include: ['src/**/*.ts', 'src/**/*.svelte', 'src/**/*.ts'],
    exclude: ['node_modules/**']
  }
}

Вот приложение.svelte: 

<h1> Hello { greeting } ! </h1>
<script>
  export default {}
</script>

Вот index.ts: 

//import App from './App.svelte'
import App from '#/App.svelte'

console.log('trying app...')

const app = new App({
  target: document.getElementById('app'),

  data: {
    greeting: 'everybody'
  }
})

app.set({ greeting: 'world' })

Спасибо за чтение и помощь!

...