Skip to content

Instantly share code, notes, and snippets.

@c9s

c9s/.babelrc

Last active October 21, 2023 14:04
Show Gist options
  • Save c9s/8e2e621d6cfc4e7f8e778d9a592e7f1b to your computer and use it in GitHub Desktop.
Save c9s/8e2e621d6cfc4e7f8e778d9a592e7f1b to your computer and use it in GitHub Desktop.
Download ZIP
webpack + babel + typescript + es6 - total solutions!
Raw
.babelrc
{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}
Raw
install.sh
npm install babel-core@6 --save-dev
npm install babel-loader@6 --save-dev
npm install babel-runtime@6 --save-dev
npm install babel-preset-es2015@6 --save-dev
npm install babel-preset-react@6 --save-dev
npm install babel-plugin-transform-runtime@6 --save-dev
npm install babel-plugin-transform-es2015-modules-commonjs@6 --save-dev
npm install babel-plugin-transform-object-assign@6 --save-dev
npm install babel-polyfill --save-dev
sudo npm install typings -g
typings install
Raw
package.json
{
"devDependencies": {
"async": "^1.2.0",
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.8.0",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-native-modules": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.0",
"file-loader": "^0.8.1",
"object-assign": "^4.0.1",
"uglify-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-closure-compiler": "^2.0.2",
"webpack-dev-server": "^1.14.1",
"webpack-stream": "^3.2.0",
"ts-loader": "^0.8.2"
}
}
Raw
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"allowJs": true,
"outDir": "build"
},
"exclude": ["node_modules"],
"files": ["typings/index.d.ts", "entry.ts"]
}
Raw
typings
{
"globalDependencies": {
"d3": "registry:dt/d3#0.0.0+20160514171929",
"jquery": "registry:dt/jquery#1.10.0+20160417213236",
"mocha": "registry:dt/mocha#2.2.5+20160317120654"
}
}
Raw
webpack.config.js
var path = require('path');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var webpack = require('webpack');
module.exports = {
'entry': {
// your entry file file (entry.ts or entry.js)
'd3metric': ['./entry'],
'd3metric.demo': ['./demo/demo.entry'],
},
'output': {
'path': __dirname,
'filename': '[name].js'
},
'module': {
'loaders': [
// ts-loader: convert typescript (es6) to javascript (es6),
// babel-loader: converts javascript (es6) to javascript (es5)
{
'test': /\.tsx?$/,
'loaders': ['babel-loader','ts-loader'],
'exclude': [/node_modules/,nodeModulesPath]
},
// babel-loader for pure javascript (es6) => javascript (es5)
{
'test': /\.(jsx?)$/,
'loaders': ['babel'],
'exclude': [/node_modules/,nodeModulesPath]
}
]
},
'externals': {
// don't bundle the 'react' npm package with our bundle.js
// but get it from a global 'React' variable
'react': 'React'
},
'plugins': [],
'resolve': {
'root': [path.resolve('./src')],
'extensions': ['', '.js', '.jsx', '.ts', '.tsx'],
// this is only required when we "import 'jquery'"
// 'alias': { 'jquery': path.join(__dirname, "vendor", "jquery-2.2.0.min.js") }
}
};
@soniccat
Copy link

soniccat commented May 1, 2018

to avoid 'nodejs module not found' you need to install @types/node (https://stackoverflow.com/questions/43804624/i-cant-import-node-modules-from-typescript-in-node-js)

@prod3v3loper
Copy link

prod3v3loper commented Jan 10, 2019 •
edited
Loading

So really interesting to read the presumptions. Then I want to create clarity. So TypeScript is meant to write versions with higher JavaScript (ES6 or higher). Babel uses it to compile back into a javascript which most browsers understand, e.g. ES5 but I would not specify an explicit version but specify how many versions he should compile back or make compatible.

Show my tutorial:
JavaScript scales with TypeScript
Or use my NPM package and generate:
Generator Webpack Preact (NPM)
Generator Webpack Preact (Github)

tsconfig.json
Here is the target for TypeScript and is it ES6

{
    "compilerOptions": {
        "target": "es6",
    },
}

.babelrc
And here is ES5

{
    "presets": ["es2015"],
}

But we can do this:
.babelrc

{
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "browsers": [
                            "last 2 versions",
                            "safari >= 7"
                        ]
                    }
                }
            ]
        ],
},

Or this
package.json

"babel": {
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "browsers": [
                            "last 2 versions",
                            "safari >= 7"
                        ]
                    }
                }
            ]
        ],
},

Of course you should not do that in runtime, but in your development environment you should not have any performance losses.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment