typescript
1 2//home.ts 3 4import Vue from 'vue'; 5import Component from 'vue-class-component'; 6import axios from 'axios'; 7 8//import * as u from './main'; このへんが 9 10import * as Main_contents from "./main" //追加したコード 11 12//<reference path="main.ts"/> うまくいかないです 13 14window.onload = function () { 15 var main_contents: Main_contents = new Main_contents("1"); 16 main_contents.getData(); 17}
typescript
1 2//main.ts 3 4import Vue from 'vue'; 5import Component from 'vue-class-component'; 6import axios from 'axios'; 7 8 9 export default class Main_contents { //追加したコード 10 11 private version: string; 12 13 constructor(version: string) { 14 this.version = version; 15 } 16 17 getData(): void { 18 let version = this.version; 19 20 new Vue({ 21 el: "#main_contents", 22 data: { 23 message_area: "", 24 write_message: "" 25 }, 26 mounted: function () { 27 28 }, 29 }); 30 } 31 } 32
javascript
1 2//webpack.config.js 3 4const path = require('path'); 5const ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 7module.exports = [{ 8 // メインとなるJavaScriptファイル(エントリーポイント) 9 entry: { 10 home: './ts/home.ts', 11 main: './ts/main.ts' 12 }, 13 // ファイルの出力設定 14 output: { 15 // 出力ファイルのディレクトリ名 16 path: `${__dirname}/build/js`, 17 // 出力ファイル名 18 filename: '[name].js' 19 }, 20 module: { 21 rules: [{ 22 // 拡張子 .ts の場合 23 test: /.ts$/, 24 // TypeScript をコンパイルする 25 use: 'awesome-typescript-loader' 26 }, 27 // ソースマップファイルの処理 28 { 29 enforce: 'pre', 30 test: /.js$/, 31 loader: 'source-map-loader' 32 } 33 ] 34 }, 35 // import 文で .ts ファイルを解決するため 36 resolve: { 37 extensions: ['.ts', '.js'], 38 // Webpackで利用するときの設定 39 alias: { 40 vue: 'vue/dist/vue.js', 41 axios: 'axios/lib/axios.js' 42 } 43 }, 44 // ソースマップを有効に 45 devtool: 'source-map' 46}, { 47 entry: { 48 common: './sass/common.scss', 49 font: './sass/font.scss', 50 home: './sass/home.scss', 51 }, 52 output: { 53 // 出力ファイルのディレクトリ名 54 path: `${__dirname}/build/css`, 55 // 出力ファイル名 56 filename: '[name].css' 57 }, 58 module: { 59 rules: [{ 60 test: /.scss$/, 61 use: ExtractTextPlugin.extract({ 62 fallback: 'style-loader', 63 use: [{ 64 loader: 'css-loader', 65 options: { minimize: true } 66 }, 67 { 68 loader: 'sass-loader', 69 options: { minimize: true } 70 } 71 ] 72 }) 73 }] 74 }, 75 plugins: [ 76 new ExtractTextPlugin('[name].css') 77 ] 78}];
json
1 2//tsconfig.json 3 4{ 5 "compilerOptions": { 6 "sourceMap": true, 7 // TSはECMAScript 5に変換 8 "target": "es5", 9 // TSのモジュールはES Modulesとして出力 10 "module": "es2015", 11 // import Vue from 'vue' の書き方を許容する 12 "allowSyntheticDefaultImports": true, 13 "lib": [ 14 "dom", 15 "es2017" 16 ], 17 "moduleResolution": "node", 18 // デコレーターを有効に設定 19 "experimentalDecorators": true 20 } 21}
json
1 2//package.json 3 4{ 5 "name": "public_html", 6 "version": "1.0.0", 7 "description": "", 8 "main": "index.js", 9 "scripts": { 10 "test": "echo \"Error: no test specified\" && exit 1", 11 "start": "webpack -w", 12 "build": "webpack -w", 13 "watch": "webpack -w" 14 }, 15 "author": "", 16 "license": "ISC", 17 "devDependencies": { 18 "awesome-typescript-loader": "^3.4.1", 19 "axios": "^0.17.1", 20 "css-loader": "^0.28.8", 21 "extract-text-webpack-plugin": "^3.0.2", 22 "node-sass": "^4.7.2", 23 "sass-loader": "^6.0.6", 24 "source-map-loader": "^0.2.3", 25 "style-loader": "^0.19.1", 26 "typescript": "^2.6.2", 27 "webpack": "^3.10.0" 28 }, 29 "dependencies": { 30 "vue": "^2.5.13", 31 "vue-class-component": "^6.1.2" 32 } 33} 34
home.tsでmain.tsのクラスを使いたいのですが、色々試したのですが、うまく参照できません…。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/12 09:40
退会済みユーザー
2018/01/12 09:41
2018/01/12 17:01
退会済みユーザー
2018/01/15 07:39