diff --git a/packages/cycle-scripts/configs/webpack.config.js b/packages/cycle-scripts/configs/webpack.config.template.js similarity index 52% rename from packages/cycle-scripts/configs/webpack.config.js rename to packages/cycle-scripts/configs/webpack.config.template.js index c02ba40..23b3fa7 100644 --- a/packages/cycle-scripts/configs/webpack.config.js +++ b/packages/cycle-scripts/configs/webpack.config.template.js @@ -1,9 +1,7 @@ -'use strict' - +module.exports = (language, ejected = false) => `'use strict' // Silence webpack2 deprecation warnings // https://github.com/vuejs/vue-loader/issues/666 process.noDeprecation = true - const webpack2Block = require('@webpack-blocks/webpack2'); const createConfig = webpack2Block.createConfig const defineConstants = webpack2Block.defineConstants @@ -12,21 +10,15 @@ const entryPoint = webpack2Block.entryPoint const setOutput = webpack2Block.setOutput const sourceMaps = webpack2Block.sourceMaps const addPlugins = webpack2Block.addPlugins - const babel = require('@webpack-blocks/babel6'); const devServer = require('@webpack-blocks/dev-server2'); -const typescript = require('@webpack-blocks/typescript'); -const webpack = require('webpack'); +${language === 'javascript' ? '' : `const typescript = require('@webpack-blocks/typescript'); +`}const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); - +const CleanWebpackPlugin = require('clean-webpack-plugin'); const path = require('path'); - const babelConfig = { - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, // Instead of relying on a babelrc file to configure babel (or in package.json configs) // We speficy here which presets to use. In the future this could be moved to it's own // package as create-react-app does with their 'babel-preset-react-app module. @@ -48,49 +40,44 @@ const babelConfig = { ['transform-object-rest-spread'] ] } - -module.exports = function(language) { - const ending = language === 'javascript' ? '.js' : '.ts' - const baseConfig = [ - entryPoint(path.join(process.cwd(), 'src', 'index' + ending)), - setOutput(path.join(process.cwd(), 'build', 'bundle.[hash].js')), - babel(babelConfig), - defineConstants({ - 'process.env.NODE_ENV': process.env.NODE_ENV +const config = [ + entryPoint(path.join(process.cwd(), 'src', 'index.${language === 'javascript' ? 'js' : 'ts' }')), + setOutput(path.join(process.cwd(), 'build', 'bundle.[hash].js')), + babel(Object.assign({}, babelConfig, { cacheDirectory: true })), + defineConstants({ + 'process.env.NODE_ENV': process.env.NODE_ENV + }), + addPlugins([ + new HtmlWebpackPlugin({ + template: 'public/index.html', + inject: true, + favicon: 'public/favicon.png', + hash: true }), + new webpack.ProvidePlugin({ + Snabbdom: 'snabbdom-pragma' + }) + ]), + env('development', [ + devServer({}, require.resolve('react-dev-utils/webpackHotDevClient')), + sourceMaps() //The default is cheap-module-source-map + ]), + env('production', [ addPlugins([ - new HtmlWebpackPlugin({ - template: 'public/index.html', - inject: true, - favicon: 'public/favicon.png', - hash: true - }), - new webpack.ProvidePlugin({ - Snabbdom: 'snabbdom-pragma' - }) - ]), - env('development', [ - devServer({}, require.resolve('react-dev-utils/webpackHotDevClient')), - sourceMaps() //The default is cheap-module-source-map - ]), - env('production', [ - addPlugins([ - new webpack.optimize.UglifyJsPlugin(), - new CopyWebpackPlugin([{ from: 'public', to: '' }]) - ]) - ]) - ] - - const config = language === 'javascript' ? baseConfig : baseConfig - .concat([ - typescript({ - tsconfig: path.join(__dirname, 'tsconfig.json'), - useBabel: true, - babelOptions: babelConfig, - useCache: true, - cacheDirectory: 'node_modules/.cache/at-loader' + new webpack.optimize.UglifyJsPlugin(), + new CopyWebpackPlugin([{ from: 'public', to: '' }]), + new CleanWebpackPlugin([ path.join(process.cwd(), 'build') ], { + root: process.cwd() }) ]) - - return createConfig(config) -} + ])${language === 'javascript' ? '' : `, + typescript({${ !ejected ? ` + configFileName:path.join(__dirname, '..', 'configs', 'tsconfig.json'),` : '' } + useBabel: true, + babelOptions: babelConfig, + useCache: true, + cacheDirectory: 'node_modules/.cache/at-loader' + })` } +] +module.exports = createConfig(config) +` diff --git a/packages/cycle-scripts/package.json b/packages/cycle-scripts/package.json index 5dd5470..3abaf4e 100644 --- a/packages/cycle-scripts/package.json +++ b/packages/cycle-scripts/package.json @@ -38,6 +38,7 @@ "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-env": "^1.3.3", "chalk": "^1.1.3", + "clean-webpack-plugin": "^0.1.16", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.1.0", "fs-extra": "^2.1.2", diff --git a/packages/cycle-scripts/scripts/build.js b/packages/cycle-scripts/scripts/build.js index d2b26f2..c0ff4e1 100644 --- a/packages/cycle-scripts/scripts/build.js +++ b/packages/cycle-scripts/scripts/build.js @@ -47,7 +47,7 @@ const FileSizeReporter = require('react-dev-utils/FileSizeReporter') const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild -const config = require('../configs/webpack.config')(notEjected.language) +const config = notEjected ? eval(require('../configs/webpack.config.template')(notEjected.language)) : require(path.join(process.cwd(), 'webpack.config.js')) measureFileSizesBeforeBuild(buildPath).then(previousFileSizes => { // Start the webpack build diff --git a/packages/cycle-scripts/scripts/eject.js b/packages/cycle-scripts/scripts/eject.js index c699de7..4490807 100644 --- a/packages/cycle-scripts/scripts/eject.js +++ b/packages/cycle-scripts/scripts/eject.js @@ -33,6 +33,7 @@ inquirer.prompt([ejectConfirmation]).then(answers => { test: 'node scripts/test.js', build: 'node scripts/build.js' } + const language = appPackageJson.cca.language // Remove flavor from devpendencies delete appPackageJson.devDependencies[flavorPackageJson.name] // Remove cca settings @@ -74,8 +75,11 @@ inquirer.prompt([ejectConfirmation]).then(answers => { fs.copySync(path.join(__dirname, 'utils'), path.join(appScriptsPath, 'utils')) // STEP 4 - Copy configs - fs.copySync(path.join(__dirname, '../', 'configs', language), path.join(appPath, 'configs')) - fs.copySync(path.join(__dirname, '../', 'configs', 'webpackDevServer.config.js'), path.join(appPath, 'configs', 'webpackDevServer.config.js')) + const configString = require(path.join(__dirname, '..', 'configs', 'webpack.config.template.js'))(language) + fs.writeFileSync(path.join(appPath, 'webpack.config.js'), configString) + if(language === 'typescript') { + fs.copySync(path.join(__dirname, '../', 'configs', 'tsconfig.json'), path.join(appPath, 'tsconfig.json')) + } // TODO sucess message }) diff --git a/packages/cycle-scripts/scripts/start.js b/packages/cycle-scripts/scripts/start.js index ec71252..0f54b07 100644 --- a/packages/cycle-scripts/scripts/start.js +++ b/packages/cycle-scripts/scripts/start.js @@ -42,7 +42,7 @@ const createWebpackCompiler = require('./utils/createWebpackCompiler') const openBrowser = require('react-dev-utils/openBrowser') const notEjected = require(path.join(process.cwd(), 'package.json')).cca -const config = require('../configs/webpack.config')(notEjected.language) +const config = notEjected ? eval(require('../configs/webpack.config.template')(notEjected.language)) : require(path.join(process.cwd(), 'webpack.config.js')) const cli = 'npm' const protocol = 'http' diff --git a/packages/cycle-scripts/template/src/typescript/interfaces.ts b/packages/cycle-scripts/template/src/typescript/interfaces.ts index bb30391..65998d5 100644 --- a/packages/cycle-scripts/template/src/typescript/interfaces.ts +++ b/packages/cycle-scripts/template/src/typescript/interfaces.ts @@ -1,4 +1,5 @@ module.exports = replacements => `${replacements.import} +${replacements.typeImport} import {DOMSource, VNode} from '@cycle/dom' export type Sources = {