From 61c230e79e10f77054943b9f3301b6fbfba9fc9f Mon Sep 17 00:00:00 2001 From: Qolzam Date: Sat, 7 Oct 2017 08:40:41 +0700 Subject: [PATCH] Migration to TypeScript :) --- app/{app.jsx => app.tsx} | 5 +- package.json | 29 ++++++++--- tsconfig.json | 26 ++++++++++ webpack.config.js | 109 ++++++++++++++++++++++++--------------- 4 files changed, 116 insertions(+), 53 deletions(-) rename app/{app.jsx => app.tsx} (93%) create mode 100644 tsconfig.json diff --git a/app/app.jsx b/app/app.tsx similarity index 93% rename from app/app.jsx rename to app/app.tsx index d84b88d..e23e6d5 100644 --- a/app/app.jsx +++ 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( - , document.getElementById('app') diff --git a/package.json b/package.json index 6efc9c7..8f45aa8 100644 --- 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", diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..13c2c69 --- /dev/null +++ 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" + ] +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 8666a39..646f940 100644 --- 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]' - } ]