Question

一些有用的汇总插件（打字稿，导入别名，苗条）之间的兼容性

请阅读以下安装细节设置步骤：

rollup-plugin-import-alias
rollup-plugin-typescript2
rollup-plugin-svelte

嗨，

可以正确构建汇总捆绑包...我的配置有什么问题？

我想使用以下插件：

rollup-plugin-typescript2：这种强大的Typiong系统的好处
rollup-plugin-import-alias：避免导入（点号斜杠点号斜杠...）地狱

但是出了点问题...

任一汇总都将模块'App.svelte'视为外部依赖项，并且不将'App.svelte'转换结果包含在包中，那些导致TypeError的结果：App在运行时不是构造函数，

或者：删除.svelte扩展名会导致TypeScript rpt2插件语义错误：找不到应用程序！

该如何解决？
汇总插件的排序顺序重要吗？
rollup-plugin-import别名，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/**']
  }
}

这里是App.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' })

感谢阅读和帮助！

汇总+ Svelte +打字稿：无法使用汇总插件导入别名

0 个答案: