diff --git a/.babelrc b/.babelrc index 5f70eebb..8397ea55 100644 --- a/.babelrc +++ b/.babelrc @@ -7,11 +7,11 @@ // is supported for each context. { "presets": [ - ["env", { "targets": { "node": true } }], - "stage-3", - "react" + ["@babel/preset-env", { "targets": { "node": true } }], + "@babel/preset-stage-3", + "@babel/preset-react" ], "plugins": [ - "syntax-dynamic-import" + "@babel/plugin-syntax-dynamic-import" ] } diff --git a/internal/webpack/configFactory.js b/internal/webpack/configFactory.js index 42b96e23..34805d03 100644 --- a/internal/webpack/configFactory.js +++ b/internal/webpack/configFactory.js @@ -373,44 +373,54 @@ export default function webpackConfigFactory(buildOptions) { presets: [ // JSX - 'react', + // We use the development mode to add the react-dev babel plugins + // This decorates our components with __self prop to JSX elements, + // which React will use to generate some runtime warnings + // And give us the path to our components in the + // react dev tools. + ifDev(['@babel/preset-react', { development: true }]), + // We turn off development mode in production builds + ifProd(['@babel/preset-react', { development: false }]), // Stage 3 javascript syntax. // "Candidate: complete spec and initial browser implementations." // Add anything lower than stage 3 at your own risk. :) - 'stage-3', + '@babel/preset-stage-3', // For our client bundles we transpile all the latest ratified // ES201X code into ES5, safe for browsers. We exclude module // transilation as webpack takes care of this for us, doing // tree shaking in the process. - ifClient(['env', { es2015: { modules: false } }]), + ifClient([ + '@babel/preset-env', + { es2015: { modules: false } }, + ]), // For a node bundle we use the specific target against // babel-preset-env so that only the unsupported features of // our target node version gets transpiled. - ifNode(['env', { targets: { node: true } }]), + ifNode([ + '@babel/preset-env', + { + targets: { node: true }, + useBuiltIns: 'usage', + }, + ]), ].filter(x => x != null), plugins: [ // Required to support react hot loader. ifDevClient('react-hot-loader/babel'), - // This decorates our components with __self prop to JSX elements, - // which React will use to generate some runtime warnings. - ifDev('transform-react-jsx-self'), - // Adding this will give us the path to our components in the - // react dev tools. - ifDev('transform-react-jsx-source'), // Replaces the React.createElement function with one that is // more optimized for production. // NOTE: Symbol needs to be polyfilled. Ensure this feature // is enabled in the polyfill.io configuration. - ifProd('transform-react-inline-elements'), + ifProd('@babel/plugin-transform-react-inline-elements'), // Hoists element creation to the top level for subtrees that // are fully static, which reduces call to React.createElement // and the resulting allocations. More importantly, it tells // React that the subtree hasn’t changed so React can completely // skip it when reconciling. - ifProd('transform-react-constant-elements'), + ifProd('@babel/plugin-transform-react-constant-elements'), // Add syntax dynamic import for direct webpack `import()` support - 'syntax-dynamic-import', + '@babel/plugin-syntax-dynamic-import', ].filter(x => x != null), }, buildOptions, diff --git a/package.json b/package.json index 2e1fd654..2a350e3b 100644 --- a/package.json +++ b/package.json @@ -85,19 +85,19 @@ }, "devDependencies": { "assets-webpack-plugin": "3.5.1", - "babel-cli": "6.26.0", - "babel-core": "6.26.0", + "@babel/cli": "^7.0.0-beta.42", + "@babel/core": "^7.0.0-beta.42", + "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.42", + "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.42", + "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.42", + "@babel/node": "^7.0.0-beta.42", + "@babel/preset-env": "^7.0.0-beta.42", + "@babel/preset-react": "^7.0.0-beta.42", + "@babel/preset-stage-3": "^7.0.0-beta.42", + "babel-core": "7.0.0-bridge.0", "babel-eslint": "8.2.2", - "babel-jest": "22.4.1", - "babel-loader": "7.1.4", - "babel-plugin-syntax-dynamic-import": "6.18.0", - "babel-plugin-transform-react-constant-elements": "6.23.0", - "babel-plugin-transform-react-inline-elements": "6.22.0", - "babel-plugin-transform-react-jsx-self": "6.22.0", - "babel-plugin-transform-react-jsx-source": "6.22.0", - "babel-preset-env": "1.6.1", - "babel-preset-react": "6.24.1", - "babel-preset-stage-3": "6.24.1", + "babel-jest": "22.4.3", + "babel-loader": "8.0.0-beta.0", "babel-template": "6.26.0", "chokidar": "2.0.2", "css-loader": "0.28.10", @@ -119,7 +119,7 @@ "husky": "0.14.3", "istanbul-api": "1.3.1", "istanbul-reports": "1.3.0", - "jest": "22.4.2", + "jest": "22.4.3", "lint-staged": "7.0.0", "md5": "2.2.1", "modernizr-loader": "1.0.1",