11

一些有用的汇总插件（typescript、import-alias、svelte）之间的兼容性

请阅读以下安装详细信息设置步骤：

  • 汇总插件导入别名
  • 汇总插件 typescript2
  • 汇总插件苗条

你好，

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

我想使用以下插件：

  • rollup-plugin-typescript2：这个强大的打字系统的好处
  • rollup-plugin-import-alias ：避免导入（点点斜线点点斜线...）地狱

但是出了点问题……

Rollup 将模块 'App.svelte' 视为外部依赖项，并且不将 'App.svelte' 编译结果包含在包中，这些结果会导致 TypeError : App is not a constructor at runtime，

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

  • 如何解决？
  • 汇总插件排序顺序重要吗？
  • 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/**']
  }
}

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

感谢阅读和帮助！

4

0 回答 0