Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate babelrc and postcssrc to js #1822

Merged
merged 2 commits into from Dec 1, 2018
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -56,12 +56,12 @@ You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel
yarn add babel-plugin-module-resolver
```

Specify the plugin in your `.babelrc` with the custom root or alias. Here's an example:
Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:

```json
```js
{
"plugins": [
["module-resolver", {
plugins: [
[require("module-resolver").default, {
"root": ["./app"],
"alias": {
"assets": "./assets"
@@ -102,13 +102,22 @@ Or in your app/javascript/app.sass file:

Webpacker out-of-the-box provides CSS post-processing using
[postcss-loader](https://github.com/postcss/postcss-loader)
and the installer sets up a standard `.postcssrc.yml`
and the installer sets up a standard `postcss.config.js`
file in your app root with standard plugins.

```yml
plugins:
postcss-import: {}
postcss-preset-env: {}
```js
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
```

## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
@@ -5,7 +5,7 @@

Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
you can use next generation JavaScript, today. The Webpacker installer sets up a
standard `.babelrc` file in your app root, which will work great in most cases
standard `babel.config.js` file in your app root, which will work great in most cases
because of [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env).

Following ES6/7 features are supported out of the box:

This file was deleted.

This file was deleted.

@@ -0,0 +1,70 @@
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')

if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(env) +
'.'
)
}

return {
presets: [
isTestEnv && [
require('@babel/preset-env').default,
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
require('@babel/preset-env').default,
{
forceAllTransforms: true,
useBuiltIns: 'entry',
modules: false,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
require('babel-plugin-macros'),
require('@babel/plugin-syntax-dynamic-import').default,
isTestEnv && require('babel-plugin-dynamic-import-node'),
require('@babel/plugin-transform-destructuring').default,
[
require('@babel/plugin-proposal-class-properties').default,
{
loose: true
}
],
[
require('@babel/plugin-proposal-object-rest-spread').default,
{
useBuiltIns: true
}
],
[
require('@babel/plugin-transform-runtime').default,
{
helpers: false,
regenerator: true
}
],
[
require('@babel/plugin-transform-regenerator').default,
{
async: false
}
]
].filter(Boolean)
}
}
@@ -0,0 +1,12 @@
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}

This file was deleted.

@@ -0,0 +1,83 @@
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')

if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(env) +
'.'
)
}

return {
presets: [
isTestEnv && [
require('@babel/preset-env').default,
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
require('@babel/preset-env').default,
{
forceAllTransforms: true,
useBuiltIns: 'entry',
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
require('@babel/preset-react').default,
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
require('babel-plugin-macros'),
require('@babel/plugin-syntax-dynamic-import').default,
isTestEnv && require('babel-plugin-dynamic-import-node'),
require('@babel/plugin-transform-destructuring').default,
[
require('@babel/plugin-proposal-class-properties').default,
{
loose: true
}
],
[
require('@babel/plugin-proposal-object-rest-spread').default,
{
useBuiltIns: true
}
],
[
require('@babel/plugin-transform-runtime').default,
{
helpers: false,
regenerator: true
}
],
[
require('@babel/plugin-transform-regenerator').default,
{
async: false
}
],
isProductionEnv && [
require('babel-plugin-transform-react-remove-prop-types').default,
{
removeImport: true
}
]
].filter(Boolean)
}
}
@@ -1,24 +1,10 @@
require "webpacker/configuration"
require "fileutils"

babelrc = Rails.root.join(".babelrc")
babel_react_preset = ["@babel/preset-react", { "useBuiltIns": true }]
replace_babel_config = FileUtils.compare_file(Rails.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")

if File.exist?(babelrc)
react_babelrc = JSON.parse(File.read(babelrc))
react_babelrc["presets"] ||= []

unless react_babelrc["presets"].flatten.include?("@babel/preset-react")
react_babelrc["presets"].push(babel_react_preset)
say "Copying react preset to your .babelrc file"

File.open(babelrc, "w") do |f|
f.puts JSON.pretty_generate(react_babelrc)
end
end
else
say "Copying .babelrc to app root directory"
copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
end
say "Copying babel.config.js to app root directory"
copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config

say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
@@ -27,6 +13,6 @@
insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /extensions:\n/

say "Installing all react dependencies"
run "yarn add react react-dom @babel/preset-react prop-types"
run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"

say "Webpacker now supports react.js 🎉", :green
@@ -4,11 +4,11 @@
puts "Copying webpack core config"
directory "#{__dir__}/config/webpack", "config/webpack"

say "Copying .postcssrc.yml to app root directory"
copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
say "Copying postcss.config.js to app root directory"
copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"

say "Copying .babelrc to app root directory"
copy_file "#{__dir__}/config/.babelrc", ".babelrc"
say "Copying babel.config.js to app root directory"
copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"

say "Copying .browserslistrc to app root directory"
copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
@@ -22,8 +22,9 @@
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/runtime": "^7.1.5",
"babel-core": "^7.0.0-bridge",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-macros": "^2.4.2",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"compression-webpack-plugin": "^2.0.0",
"css-loader": "^1.0.1",
@@ -34,9 +35,11 @@
"node-sass": "^4.10.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"path-complete-extname": "^1.0.0",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.4.0",
"postcss-safe-parser": "^4.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.1.0",
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.