From ec0a39e080f9a04f11c935d10260b29928289fde Mon Sep 17 00:00:00 2001 From: Gustav Wengel Date: Tue, 13 Feb 2018 10:00:43 +0100 Subject: [PATCH] Added the abillity to import js and jsx files with ts-loader (#242) * added js and jsx to things that ts-loader loads * removed spaces and made prettier runnable on windows * run jsx specs too * added isejecting * added dependencies and babeltransform * bumped jest version# * does it work without cache? * cache? * added ts * updates ts-jest * readd caching * removed ts as a devdependency * added babel to handle js files * added prod env * prod is handled by babel loader * added ts as devdep * cache node modules * fixed legal --- package.json | 2 +- .../react-scripts/config/jest/babelTransform.js | 15 +++++++++++++++ .../react-scripts/config/webpack.config.dev.js | 15 ++++++++++++++- .../react-scripts/config/webpack.config.prod.js | 14 +++++++++++++- packages/react-scripts/package.json | 10 +++++++--- .../scripts/utils/createJestConfig.js | 11 +++++++---- 6 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 packages/react-scripts/config/jest/babelTransform.js diff --git a/package.json b/package.json index 4beaa5f8c48..596eaa1ad5d 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", "test": "node packages/react-scripts/scripts/test.js --env=jsdom", - "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", + "format": "prettier --trailing-comma es5 --single-quote --write \"packages/*/*.js\" \"packages/*/!(node_modules)/**/*.js\"", "precommit": "lint-staged" }, "devDependencies": { diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js new file mode 100644 index 00000000000..02742e90c6c --- /dev/null +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -0,0 +1,15 @@ +// @remove-file-on-eject +/** + * Copyright (c) 2014-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'use strict'; + +const babelJest = require('babel-jest'); + +module.exports = babelJest.createTransformer({ + presets: [require.resolve('babel-preset-react-app')], + babelrc: false, +}); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index e5dd6766ffc..ed7d6400de2 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -124,7 +124,7 @@ module.exports = { // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), - new TsconfigPathsPlugin({configFile: paths.appTsConfig}) + new TsconfigPathsPlugin({ configFile: paths.appTsConfig }), ], }, module: { @@ -156,6 +156,19 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]', }, }, + { + test: /\.(js|jsx|mjs)$/, + include: paths.appSrc, + loader: require.resolve('babel-loader'), + options: { + // @remove-on-eject-begin + babelrc: false, + presets: [require.resolve('babel-preset-react-app')], + // @remove-on-eject-end + compact: true, + }, + }, + // Compile .tsx? { test: /\.(ts|tsx)$/, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 5fb2fb0564a..65b50efa29e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -130,7 +130,7 @@ module.exports = { // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), - new TsconfigPathsPlugin({configFile: paths.appTsConfig}) + new TsconfigPathsPlugin({ configFile: paths.appTsConfig }), ], }, module: { @@ -160,6 +160,18 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]', }, }, + { + test: /\.(js|jsx|mjs)$/, + include: paths.appSrc, + loader: require.resolve('babel-loader'), + options: { + // @remove-on-eject-begin + babelrc: false, + presets: [require.resolve('babel-preset-react-app')], + // @remove-on-eject-end + compact: true, + }, + }, // Compile .tsx? { test: /\.(ts|tsx)$/, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 713b5eaedc7..1a89a04a2bf 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -22,6 +22,9 @@ }, "dependencies": { "autoprefixer": "7.1.6", + "babel-jest": "^22.1.0", + "babel-loader": "^7.1.2", + "babel-preset-react-app": "^3.1.1", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", @@ -31,7 +34,7 @@ "fork-ts-checker-webpack-plugin": "^0.2.8", "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", - "jest": "20.0.4", + "jest": "22.1.4", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", @@ -41,7 +44,7 @@ "source-map-loader": "^0.2.1", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", - "ts-jest": "^20.0.7", + "ts-jest": "22.0.1", "ts-loader": "^2.3.7", "tsconfig-paths-webpack-plugin": "^2.0.0", "tslint": "^5.7.0", @@ -54,7 +57,8 @@ }, "devDependencies": { "react": "^15.5.4", - "react-dom": "^15.5.4" + "react-dom": "^15.5.4", + "typescript": "^2.7.1" }, "peerDependencies": { "typescript": "2.x" diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 3a744c971ac..ecbb6791ba6 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -11,7 +11,7 @@ const fs = require('fs'); const chalk = require('chalk'); const paths = require('../../config/paths'); -module.exports = (resolve, rootDir) => { +module.exports = (resolve, rootDir, isEjecting) => { // Use this instead of `paths.testsSetup` to avoid putting // an absolute filename into configuration after ejecting. const setupTestsFile = fs.existsSync(paths.testsSetup) @@ -25,12 +25,15 @@ module.exports = (resolve, rootDir) => { setupFiles: [resolve('config/polyfills.js')], setupTestFrameworkScriptFile: setupTestsFile, testMatch: [ - '/src/**/__tests__/**/*.ts?(x)', - '/src/**/?(*.)(spec|test).ts?(x)', + '/src/**/__tests__/**/*.(j|t)s?(x)', + '/src/**/?(*.)(spec|test).(j|t)s?(x)', ], testEnvironment: 'node', testURL: 'http://localhost', transform: { + '^.+\\.(js|jsx|mjs)$': isEjecting + ? '/node_modules/babel-jest' + : resolve('config/jest/babelTransform.js'), '^.+\\.tsx?$': resolve('config/jest/typescriptTransform.js'), '^.+\\.css$': resolve('config/jest/cssTransform.js'), '^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve( @@ -38,7 +41,7 @@ module.exports = (resolve, rootDir) => { ), }, transformIgnorePatterns: [ - '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$' + '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$', ], moduleNameMapper: { '^react-native$': 'react-native-web',