Skip to content

Commit ffa7801

Browse files
Пинчук Виталий АПинчук Виталий А
Пинчук Виталий А
authored and
Пинчук Виталий А
committed
Modern way with vue-class-component decorator. With systemJS failed (vue_class_component_1.default is not a function), but es6 modules is ok
1 parent d9c2c67 commit ffa7801

File tree

9 files changed

+44
-13
lines changed

9 files changed

+44
-13
lines changed

‎gulpfile.esm.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
parallel,
1212
series,
1313
} from 'gulp';
14-
import uglifyES from 'gulp-uglify-es';
14+
// import uglifyES from 'gulp-uglify-es';
1515

1616
import appConf from './app.conf';
1717

@@ -31,7 +31,9 @@ task('cssbundle',
3131

3232
task('postdeploy.dev:copyNonTranspiledFiles',
3333
() => src([
34+
path.resolve('node_modules', 'es-module-shims', 'dist', 'es-module-shims.min.js'),
3435
path.resolve(absSrc, appConf.entryDevFileName),
36+
path.resolve(absSrc, 'importmap.dev.json'),
3537
])
3638
.pipe(dest(absDest)));
3739

@@ -76,13 +78,13 @@ task('transpile',
7678
.pipe(tsApp()).js;
7779

7880
return tsResult
79-
.pipe(uglifyES())
81+
// .pipe(uglifyES())
8082
.pipe(dest(absDest));
8183
});
8284

8385
task('copySystemJs', // not in 'copyNonTranspiledFiles' because of dest
8486
() => src([
85-
path.resolve('node_modules', 'systemjs', 'dist', 'system.min.js'),
87+
path.resolve('node_modules', 'systemjs', 'dist', 'system.js'),
8688
path.resolve('node_modules', 'systemjs', 'dist', 'extras', 'named-register.js'),
8789
// path.resolve('node_modules', 'systemjs-plugin-text', 'text.js'),
8890
])

‎package-lock.json

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"typescript",
77
"nobundle",
88
"systemjs",
9-
"es6 modules"
9+
"es6 modules",
10+
"vue"
1011
],
1112
"eslintIgnore": [
1213
"dist",
@@ -31,9 +32,11 @@
3132
"www.dev": "node -r esm ./dist/express.node/express.node.js --dev"
3233
},
3334
"dependencies": {
35+
"es-module-shims": "0.2.15",
3436
"express": "4.17.1",
3537
"systemjs": "5.0.0",
36-
"vue": "2.6.10"
38+
"vue": "2.6.10",
39+
"vue-class-component": "7.1.0"
3740
},
3841
"devDependencies": {
3942
"@types/express": "^4.17.0",

‎src/common.blocks/IamHeader/IamHeader.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import Vue from 'vue';
2+
import Component from 'vue-class-component';
23

34
import { name, template } from './IamHeader.conf';
45

5-
const IamHeader = Vue.extend({
6+
@Component({
67
name,
78
template,
8-
});
9+
})
10+
class IamHeader extends Vue {
11+
}
912

1013
export default IamHeader;

‎src/importmap.dev.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"imports": {
3+
"vue": ["https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"],
4+
"vue-class-component": ["https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-class-component.esm.js"]
5+
}
6+
}

‎src/importmap.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"imports": {
3-
"vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"
3+
"vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",
4+
"vue-class-component": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-class-component.min.js"
45
}
56
}

‎src/index.dev.htm

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@
33
<head>
44
<link rel="icon" href="https://github.com/favicon.ico">
55
<link rel="stylesheet" href="index.css">
6+
<script>
7+
// fix vue-class-component.esm.js
8+
// @link: https://github.com/vuejs/vue-class-component/issues/356
9+
window.process = { env: { NODE_ENV: 'production' } };
10+
</script>
611
</head>
712
<body>
813
<div class="js-app">
914
<iam-header>Test Es6 modules & Vue</iam-header>
1015
</div>
11-
<script type="module" src="main.js"></script>
16+
<script type="importmap-shim" src="importmap.dev.json"></script>
17+
<script type="module-shim" src="main.js"></script>
18+
<script src="es-module-shims.min.js"></script>
1219
</body>

‎src/index.htm

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
<head>
44
<!--IE 7-11 Promise polyfill -->
5-
<script src="bluebird.core.min.js"></script>
5+
<!-- <script src="bluebird.core.min.js"></script> -->
66
<!--IE 10+ Fetch polyfill-->
77
<script src="fetch.umd.js"></script>
88

9-
<script src="systemjs/system.min.js"></script>
9+
<script src="systemjs/system.js"></script>
1010
<script src="systemjs/named-register.js"></script>
1111
<link rel="icon" href="https://github.com/favicon.ico">
1212
<link rel="stylesheet" href="index.css">

‎tsconfig.base.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
"strict": true, //noImplicitAny, noImplicitThis, alwaysStrict, strictNullChecks, strictFunctionTypes, strictPropertyInitialization
1212
"paths": {
1313
"~/*": ["./*"],
14-
"@common/*": ["./common.blocks/*"],
15-
"vue": ["https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"]
14+
"@common/*": ["./common.blocks/*"]
1615
}
1716
}
1817
}

0 commit comments

Comments
 (0)