diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 405acc968..9473070c8 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -79,15 +79,11 @@ Please fill in all the relevant fields by running these commands in terminal. --> -1. `npm ls react-scripts-ts` (if you haven’t ejected): +1. `npm ls react-scripts-ts-component` (if you haven’t ejected): 2. `node -v`: 3. `npm -v`: 4. `yarn --version` (if you use Yarn): -<<<<<<< HEAD -5. `npm ls react-scripts` (if you haven’t ejected): -======= -3. `npm ls react-scripts-ts` (if you haven’t ejected): ->>>>>>> Fix Code Review +3. `npm ls react-scripts-ts-component` (if you haven’t ejected): Then, specify: diff --git a/README.md b/README.md index 9131431d9..f81fe11a2 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ _Do you know react and want to try out typescript? Or do you know typescript and ```sh npm install -g create-react-app -create-react-app my-app --scripts-version=react-scripts-ts +create-react-app my-app --scripts-version=react-scripts-ts-component cd my-app/ npm start ``` diff --git a/packages/react-scripts/bin/react-scripts-ts.js b/packages/react-scripts/bin/react-scripts-ts-component.js similarity index 94% rename from packages/react-scripts/bin/react-scripts-ts.js rename to packages/react-scripts/bin/react-scripts-ts-component.js index 9738aef28..45e4d59aa 100755 --- a/packages/react-scripts/bin/react-scripts-ts.js +++ b/packages/react-scripts/bin/react-scripts-ts-component.js @@ -45,6 +45,6 @@ switch (script) { } default: console.log('Unknown script "' + script + '".'); - console.log('Perhaps you need to update react-scripts-ts?'); + console.log('Perhaps you need to update react-scripts-ts-component?'); break; } diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index e860d9b04..4a898709e 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -51,9 +51,10 @@ function getServedPath(appPackageJson) { // config after eject: we're in ./config/ module.exports = { dotenv: resolveApp('.env'), - appBuild: resolveApp('build'), + appBuild: resolveApp('dist'), appPublic: resolveApp('public'), - appHtml: resolveApp('public/index.html'), + appHtml: resolveApp('public/dev.html'), + appDevJs: resolveApp('src/dev.tsx'), appIndexJs: resolveApp('src/index.tsx'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), @@ -72,9 +73,10 @@ const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath); module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), - appBuild: resolveApp('build'), + appBuild: resolveApp('dist'), appPublic: resolveApp('public'), - appHtml: resolveApp('public/index.html'), + appHtml: resolveApp('public/dev.html'), + appDevJs: resolveApp('src/dev.tsx'), appIndexJs: resolveApp('src/index.tsx'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), @@ -104,9 +106,10 @@ if ( module.exports = { dotenv: resolveOwn('template/.env'), appPath: resolveApp('.'), - appBuild: resolveOwn('../../build'), + appBuild: resolveOwn('../../dist'), appPublic: resolveOwn('template/public'), - appHtml: resolveOwn('template/public/index.html'), + appHtml: resolveOwn('template/public/dev.html'), + appDevJs: resolveOwn('template/src/dev.tsx'), appIndexJs: resolveOwn('template/src/index.tsx'), appPackageJson: resolveOwn('package.json'), appSrc: resolveOwn('template/src'), diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2934aeae6..67a77de65 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -58,7 +58,7 @@ module.exports = { // Errors should be considered fatal in development require.resolve('react-error-overlay'), // Finally, this is your app's code: - paths.appIndexJs, + paths.appDevJs, // We include the app code last so that if there is a runtime error during // initialization, it doesn't blow up the WebpackDevServer client, and // changing JS code would still trigger a refresh. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 8519c6603..3ac4affdd 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -42,7 +42,7 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') { } // Note: defined here because it will be used more than once. -const cssFilename = 'static/css/[name].[contenthash:8].css'; +const cssFilename = '[name].css'; // ExtractTextPlugin expects the build output to be flat. // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27) @@ -63,15 +63,17 @@ module.exports = { // You can exclude the *.map files from the build during deployment. devtool: 'source-map', // In production, we only want to load the polyfills and the app code. - entry: [require.resolve('./polyfills'), paths.appIndexJs], + entry: { + index: [require.resolve('./polyfills'), paths.appIndexJs] + }, output: { // The build folder. path: paths.appBuild, // Generated JS file names (with nested folders). // There will be one main bundle, and one file per asynchronous chunk. // We don't currently advertise code splitting but Webpack supports it. - filename: 'static/js/[name].[chunkhash:8].js', - chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', + filename: '[name].js', + chunkFilename: '[name].[chunkhash:8].chunk.js', // We inferred the "public path" (such as / or /my-project) from homepage. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) @@ -79,7 +81,17 @@ module.exports = { path .relative(paths.appSrc, info.absoluteResourcePath) .replace(/\\/g, '/'), + libraryTarget: 'umd', }, + target: 'node', + externals: [ + 'react', + 'react-dom', + 'whatwg-fetch', + 'object-assign', + 'promise/lib/es6-extensions.js', + 'promise/lib/rejection-tracking', + ], resolve: { // This allows you to set a fallback for where Webpack should look for modules. // We placed these paths second because we want `node_modules` to "win" @@ -172,7 +184,7 @@ module.exports = { ], loader: require.resolve('file-loader'), options: { - name: 'static/media/[name].[hash:8].[ext]', + name: 'media/[name].[hash:8].[ext]', }, }, // "url" loader works just like "file" loader but it also embeds @@ -182,7 +194,7 @@ module.exports = { loader: require.resolve('url-loader'), options: { limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', + name: 'media/[name].[hash:8].[ext]', }, }, // Compile .tsx? @@ -256,23 +268,6 @@ module.exports = { // In production, it will be an empty string unless you specify "homepage" // in `package.json`, in which case it will be the pathname of that URL. new InterpolateHtmlPlugin(env.raw), - // Generates an `index.html` file with the