Migration to TypeScript :)

2017-10-07 08:40:41 +07:00
parent 3c49a3311a
commit 61c230e79e
4 changed files with 116 additions and 53 deletions
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -8,11 +8,11 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'

 import { Provider } from 'react-redux'
-import store, { history } from 'configureStore'
+import store, { history } from 'store/configureStore'
 import { ConnectedRouter } from 'react-router-redux'

 // - Import app components
-import Master from 'Master'
+import Master from 'components/Master'

 // - Impport actions

@@ -44,7 +44,6 @@ ReactDOM.render(
 			<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
 				<Master />
 			</MuiThemeProvider>
-
 		</ConnectedRouter>
 	</Provider>,
 	document.getElementById('app')
--- a/package.json
+++ b/package.json
@@ -12,11 +12,6 @@
  "license": "MIT",
  "dependencies": {
    "axios": "^0.16.1",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
    "classnames": "^2.2.5",
    "css-loader": "^0.28.0",
    "deep-freeze-strict": "^1.1.1",
@@ -54,11 +49,23 @@
    "script-loader": "^0.7.0",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
-    "uuid": "^3.0.1",
-    "webpack": "^2.4.1"
+    "uuid": "^3.0.1"
  },
  "devDependencies": {
+    "@types/material-ui": "^0.18.2",
+    "@types/react": "^16.0.10",
+    "@types/react-dom": "^16.0.1",
+    "@types/react-redux": "^5.0.10",
+    "@types/react-router-dom": "^4.0.8",
+    "@types/react-router-redux": "^5.0.8",
+    "@types/webpack": "^3.0.13",
+    "@types/node": "^8.0.33",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
@@ -68,7 +75,13 @@
    "karma-webpack": "^2.0.3",
    "mocha": "^3.2.0",
    "redux-logger": "^3.0.1",
-    "redux-mock-store": "^1.2.3"
+    "redux-mock-store": "^1.2.3",
+    "source-map-loader": "^0.2.2",
+    "ts-loader": "^2.3.7",
+    "typescript": "^2.5.3",
+    "ts-node": "^3.3.0",
+    "tslint": "^5.7.0",
+    "webpack": "^3.6.0"
  },
  "engines": {
    "node": "7.3.0",
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+
+    "compilerOptions": {
+    "module": "es6", // use ES2015 modules
+    "target": "es6", // compile to ES2015 (Babel will do the rest)
+    "allowSyntheticDefaultImports": true, // see below
+    "baseUrl": "./app", // enables you to import relative to this folder
+    "paths": {
+      "angular2/*": ["../path/to/angular2/*"],
+      "local/*": ["../path/to/local/modules/*"]
+    },
+    "sourceMap": true, // make TypeScript generate sourcemaps
+    "outDir": "public", // output directory to build to (irrelevant because we use Webpack most of the time)
+    "jsx": "preserve", // enable JSX mode, but "preserve" tells TypeScript to not transform it (we'll use Babel)
+    "strict": true,
+    "moduleResolution": "node",
+    "allowJs": true
+    
+  },
+  "include":[
+    "app/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,9 +13,14 @@ try {

 }

+var babelOptions = {
+  plugins: ['transform-decorators-legacy'],
+  presets: ['react', 'env', 'stage-0']
+};
+
 module.exports = {
  entry: [
-    './app/app.jsx'
+    './app/app.tsx'
  ],
  externals: {
    jquery: 'jQuery'
@@ -75,57 +80,77 @@ module.exports = {
    ],
    alias: {
      app: 'app',
+      components: 'app/components',
+      db: 'app/db',
+      store: 'app/store',
      applicationStyles: 'app/styles/app.scss',
      actions: 'app/actions/actions.jsx',
      actionTypes: 'app/constants/actionTypes.jsx',
      configureStore: 'app/store/configureStore.jsx'

    },
-    extensions: [' ', '.scss', '.js', '.jsx']
+    extensions: [' ', '.scss', ".ts", ".tsx", ".js", ".json", '.jsx']
  },
  module: {
-    rules: [{
-      test: /\.jsx$/,
-      exclude: /(node_modules|bower_components)/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          plugins: ['transform-decorators-legacy'],
-          presets: ['react', 'env', 'stage-0']
+    rules: [
+      {
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions
+          },
+          {
+            loader: 'ts-loader',
+            options: { transpileOnly: true }
+          }
+        ]
+      },
+      {
+        enforce: "pre",
+        test: /\.js$/,
+        loader: "source-map-loader"
+      },
+      {
+        test: /\.jsx$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: babelOptions
        }
+      },
+      {
+        test: /\.scss$/,
+        use: [{
+          loader: "style-loader"
+        }, {
+          loader: "css-loader"
+        }, {
+          loader: "sass-loader",
+          options: {
+            includePaths: [
+
+            ]
+          }
+        }]
+      },
+      {
+        test: /\.css$/,
+        use: [{
+          loader: "style-loader"
+        }, {
+          loader: "css-loader"
+
+        }]
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader'
+      }, {
+        test: /\.(jpe?g|png|webp|gif|cur)$/,
+        loader: 'file-loader?name=/images/[name].[ext]'
      }
-    },
-    {
-      test: /\.scss$/,
-      use: [{
-        loader: "style-loader"
-      }, {
-        loader: "css-loader"
-      }, {
-        loader: "sass-loader",
-        options: {
-          includePaths: [
-
-          ]
-        }
-      }]
-    },
-    {
-      test: /\.css$/,
-      use: [{
-        loader: "style-loader"
-      }, {
-        loader: "css-loader"
-
-      }]
-    },
-    {
-      test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'url-loader'
-    }, {
-      test: /\.(jpe?g|png|webp|gif|cur)$/,
-      loader: 'file-loader?name=/images/[name].[ext]'
-    }


    ]