Rollup-plugin-typescript2: Typescript3.8のプライベートフィールドは構築を中断します

作成日 2020年03月18日  ·  7コメント  ·  ソース: ezolenko/rollup-plugin-typescript2

何が起こり、なぜそれが間違っているのか

プライベートフィールドを使用するようにコードをアップグレードすると、ビルド時に次のようになります。
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)

詳細はこちら

それはサポートされていないように、 「#」を知らないだけですか?
私はただ興味があります、さもなければ、私はいくつかのエラーを受け取るでしょう。
頭を上げて、ヒントや提案をありがとう!

環境

typescript 3.8.3、
tslint 5.20.1

バージョン

  • タイプスクリプト:3.8.3
  • ロールアップ:2.1.0
  • rollup-plugin-typescript2:0.26.0

rollup.config.js

import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
let defaults = { compilerOptions: { declaration: true } };
let override = { compilerOptions: { declaration: false } };
export default {


  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    typescript({
      tsconfigDefaults: defaults,
      tsconfig: "tsconfig.json",
      tsconfigOverride: override
    })
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "declaration": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "importHelpers": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "index.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],

}

package.json

{
  "name": "@vue-polkadot/vue-keyring",
  "version": "2.0.0",
  "author": "Matej Nemcek <[email protected]>",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-bundle": "vue-cli-service build --target lib --name vue-keyring ./src/index.ts",
    "build:rollup": "rollup -c",
    "build:rollup:watch": "rollup -cw"
  },
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js",
    "*.ts"
  ],
  "repository": "https://github.com:vue-polkadot/vue-ui.git",
  "maintainers": [
    "Matej Nemcek <[email protected]>"
  ],
  "license": "MIT",
  "dependencies": {
    "@polkadot/keyring": "^2.6.2",
    "@polkadot/types": "^1.7.1",
    "@polkadot/util": "^2.6.2",
    "@polkadot/util-crypto": "^2.2.2",
    "@types/store": "^2.0.2",
    "@types/webpack-env": "^1.14.0",
    "@vue-polkadot/vue-settings": "0.0.11",
    "core-js": "^2.6.5",
    "mkdirp": "^1.0.3",
    "rxjs": "^6.5.2",
    "store": "^2.0.12",
    "tslib": "1.11.1",
    "tslint": "^6.1.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-styled-components": "^1.4.9"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-typescript": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "rollup": "^2.1.0",
    "rollup-plugin-typescript2": "^0.26.0",
    "typescript": "^3.8.3",
    "vue-template-compiler": "^2.6.10"
  }
}

詳細3のプラグイン出力

❯ yarn build:rollup
yarn run v1.22.4
$ rollup -c

src/index.ts → dist/index.js, dist/index.es.js...
rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/placeholder",
    "moduleResolution": 2,
    "allowNonTsExtensions": true
}
rpt2: parsed tsconfig: {
    "options": {
        "declaration": false,
        "target": 99,
        "module": 99,
        "strict": true,
        "jsx": 1,
        "outDir": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/placeholder",
        "importHelpers": true,
        "noImplicitAny": true,
        "moduleResolution": 2,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring",
        "skipLibCheck": true,
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "lib.esnext.d.ts",
            "lib.dom.d.ts",
            "lib.dom.iterable.d.ts",
            "lib.scripthost.d.ts"
        ],
        "configFilePath": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/tsconfig.json",
        "noEmitHelpers": false,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "allowNonTsExtensions": true
    },
    "fileNames": [
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/defaults.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/main.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-tsx.d.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-vue.d.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/types.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/accounts.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/addresses.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/contracts.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/development.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/genericSubject.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/index.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/types.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/options/index.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/options/types.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/stores/Browser.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/options/item.tsx"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "declaration": false,
            "target": "esnext",
            "module": "esnext",
            "strict": true,
            "jsx": "preserve",
            "declarationDir": "./dist",
            "outDir": "./dist",
            "importHelpers": true,
            "noImplicitAny": true,
            "moduleResolution": "node",
            "experimentalDecorators": true,
            "esModuleInterop": true,
            "allowSyntheticDefaultImports": true,
            "sourceMap": true,
            "baseUrl": ".",
            "skipLibCheck": true,
            "paths": {
                "@/*": [
                    "src/*"
                ]
            },
            "lib": [
                "esnext",
                "dom",
                "dom.iterable",
                "scripthost"
            ]
        },
        "include": [
            "index.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "exclude": [
            "node_modules"
        ],
        "compileOnSave": false
    },
    "errors": [],
    "wildcardDirectories": {
        "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/src": 1,
        "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/tests": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "index.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "excludeSpecs": [
            "node_modules"
        ],
        "validatedIncludeSpecs": [
            "index.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "validatedExcludeSpecs": [
            "node_modules"
        ],
        "wildcardDirectories": {
            "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/src": 1,
            "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/tests": 1
        }
    }
}
rpt2: typescript version: 3.8.3
rpt2: tslib version: 1.10.0
rpt2: rollup version: 2.1.0
rpt2: rollup-plugin-typescript2 version: 0.26.0
rpt2: plugin options:
{
    "tsconfigDefaults": {
        "compilerOptions": {
            "declaration": true
        }
    },
    "tsconfig": "tsconfig.json",
    "tsconfigOverride": {
        "compilerOptions": {
            "declaration": false
        }
    },
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "useTsconfigDeclarationDir": false,
    "transformers": [],
    "objectHashIgnoreUnknownHack": false,
    "cwd": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring",
    "typescript": "version 3.8.3"
}
rpt2: rollup config:
{
    "experimentalCacheExpiry": 10,
    "external": [
        "@polkadot/keyring",
        "@polkadot/types",
        "@polkadot/util",
        "@polkadot/util-crypto",
        "@types/store",
        "@types/webpack-env",
        "@vue-polkadot/vue-settings",
        "core-js",
        "mkdirp",
        "rxjs",
        "store",
        "tslib",
        "tslint",
        "vue",
        "vue-class-component",
        "vue-property-decorator",
        "vue-styled-components"
    ],
    "inlineDynamicImports": false,
    "input": "src/index.ts",
    "perf": false,
    "plugins": [
        {
            "name": "rpt2"
        },
        {
            "name": "stdin"
        }
    ],
    "strictDeprecations": false
}
rpt2: tsconfig path: /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/tsconfig.json
rpt2: included:
[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]
rpt2: excluded:
[
    "*.d.ts",
    "**/*.d.ts"
]
rpt2: Ambient types:
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-tsx.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-vue.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/bn.js/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/color-name/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/events/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/glob/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/minimatch/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/node/ts3.2/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/normalize-package-data/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/q/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/store/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/webpack-env/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/events/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/glob/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/minimatch/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/node/ts3.2/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/q/index.d.ts
rpt2: ambient types changed, redoing all semantic diagnostics
rpt2: transpiling '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts'
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/code/cache/2e74b8aa9cf50ce50dc9c899dfd096c9e3ddef66'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/syntacticDiagnostics/cache/2e74b8aa9cf50ce50dc9c899dfd096c9e3ddef66'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/semanticDiagnostics/cache/2e74b8aa9cf50ce50dc9c899dfd096c9e3ddef66'
rpt2:     cache miss
rpt2: dependency '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts'
rpt2:     imported by '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts'
rpt2: resolving './Keyring' imported by '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts'
rpt2:     to '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts'
rpt2: transpiling '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts'
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/code/cache/21a1adfe02fac21a10118d177bfd0b084dd0c7b6'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/syntacticDiagnostics/cache/21a1adfe02fac21a10118d177bfd0b084dd0c7b6'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/semanticDiagnostics/cache/21a1adfe02fac21a10118d177bfd0b084dd0c7b6'
rpt2:     cache miss
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
src/Keyring.ts (40:11)
38:
39:   #keyring?: KeyringInstance;
40:   #accounts: AddressSubject = accounts;
               ^
41:
42:   #addresses: AddressSubject = addresses;
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:10120:30)
    at Module.error (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:14557:16)
    at tryParse (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:14450:23)
    at Module.setSource (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:14839:33)
    at /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:16717:20
    at async Promise.all (index 1)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at rollupInternal (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:18126:18)

error Command failed with exit code 1.

最も参考になるコメント

@yangwaoそれは私が

acornInjectPlugins: [
acornClassFields
]

行く方法です。 まだ#がエラーとしてマークされていますが、それは別の話です

全てのコメント7件

これは、プラグインが生成するJSを解析できないことを訴えるロールアップです。これが回避策だと思います: https

https://github.com/rollup/rollup/issues/3128#issuecomment-534144843を試しました

Rollup.config.js

import acornPrivateFields from 'acorn-private-class-elements'
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
let defaults = { compilerOptions: { declaration: true } };
let override = { compilerOptions: { declaration: false } };
export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  acornInjectPlugins: [
    acornPrivateFields()
  ],
  plugins: [
    typescript({
      tsconfigDefaults: defaults,
      tsconfig: "tsconfig.json",
      tsconfigOverride: override,
      // verbosity: 3,
    })
  ],
}

出力

❯ yarn build:rollup
yarn run v1.22.4
$ rollup -c
[!] TypeError: Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
    at module.exports (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/acorn-private-class-elements/index.js:12:14)
    at Object.<anonymous> (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/rollup.config.js:30:5)
    at Module._compile (internal/modules/cjs/loader.js:1157:30)
    at Object.require.extensions.<computed> [as .js] (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/bin/rollup:824:24)
    at Module.load (internal/modules/cjs/loader.js:1001:32)
    at Function.Module._load (internal/modules/cjs/loader.js:900:14)
    at Module.require (internal/modules/cjs/loader.js:1043:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/bin/rollup:831:32

error Command failed with exit code 1.

どこかからacornPrivateFieldsをインポートしましたか?

同じ、同じエラーを試しました。 これが私の設定です:

`「acorn-class-fields」からacornClassFieldsをインポートします
「acorn-private-class-elements」からacornClassElementsをインポートします
「acorn-static-class-features」からacornStaticClassFeaturesをインポートします
「acorn-private-methods」からacornPrivateMethodsをインポートします

デフォルトのエクスポート{
入力:['src / ext / src / bg / background.js']、//、 'src / ext / src / browser_action / main.js']、
出力:{
dir: 'dist / ext / src / bg'、
//ファイル: 'ext / src / bg / background-dist.js'、
形式: 'es'、
プラグイン:[]
}、
acornInjectPlugins:[
acornClassFields()、 `

私は得る

[!] TypeError: Cannot read property 'prototype' of undefined TypeError: Cannot read property 'prototype' of undefined at module.exports (C:\Users\thear\Documents\Programming\AutoStamperThetis\node_modules\acorn-class-fields\node_modules\acorn-private-class-elements\index.js:12:14)

@ezolenkoはい、それは

昨日も試しましたhttps://www.npmjs.com/package/@rollup/plugin-typescript

別のエラーがありましたが、少なくともそれはプライベートであることを知っています

image

しかし、ターゲットをes5からそれより高い位置に移動すると、#は再び不明になります。

image

私には、パーサーまたはヘルパーが不足しているように見えますか?
私はプライベートフィールドに本当に慣れていないので、上流の物をマージしているだけです😅

@ezolenko @ 0biWanKenobiこれが問題になる可能性がありますか? https://github.com/acornjs/acorn-private-class-elements/pull/10

@yangwaoそれは私が

acornInjectPlugins: [
acornClassFields
]

行く方法です。 まだ#がエラーとしてマークされていますが、それは別の話です

このページは役に立ちましたか?
0 / 5 - 0 評価