Replace ts-loader with Babel (#21587)

* Applied prettier to relevant webpack configs

* Replaced ng-annotate with babel-plugin-angularjs-annotate

… and replaced ts-loader with @preset/typescript

* Removed redundant import

… that is problematic with Babel's module resolver

* Updated lockfile

* Traspile debug package to es5 for PhantomJS support

* Update babel to latest version

* Remove @babel/poolyfill and url search params polyfill

* Add ts-loader to grafana-ui dependencies

* Update prod webpack build to use cor-js 3

* Applied prettier to relevant webpack configs

* Replaced ng-annotate with babel-plugin-angularjs-annotate

… and replaced ts-loader with @preset/typescript

* Updated lockfile

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Steven Vachon
2020-01-30 04:54:11 -05:00
committed by GitHub
parent a0ad81180e
commit 9005b484f0
11 changed files with 423 additions and 503 deletions

View File

@ -27,73 +27,100 @@ module.exports = (env = {}) =>
},
module: {
rules: [{
test: /\.tsx?$/,
enforce: 'pre',
exclude: /node_modules/,
use: {
loader: 'tslint-loader',
options: {
emitErrors: true,
typeCheck: false,
}
}
},
// Note: order is bottom-to-top and/or right-to-left
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
// Note: order is top-to-bottom and/or left-to-right
plugins: [
[
require('@rtsao/plugin-proposal-class-properties'),
{
loose: true,
},
],
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
'angularjs-annotate',
],
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
corejs: 3,
modules: false,
},
],
'@babel/preset-typescript',
'@babel/preset-react',
],
},
},
},
{
loader: 'tslint-loader',
options: {
emitErrors: true,
typeCheck: false,
},
},
],
},
require('./sass.rule.js')({
sourceMap: false,
preserveUrl: false
preserveUrl: false,
}),
{
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader'
loader: 'file-loader',
},
]
],
},
plugins: [
new CleanWebpackPlugin(),
env.noTsCheck ?
new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
:
new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
}),
env.noTsCheck
? new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
: new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
}),
new MiniCssExtractPlugin({
filename: 'grafana.[name].[hash].css'
filename: 'grafana.[name].[hash].css',
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/views/error.html'),
template: path.resolve(__dirname, '../../public/views/error-template.html'),
inject: false,
chunksSortMode: 'none',
excludeChunks: ['dark', 'light']
excludeChunks: ['dark', 'light'],
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/views/index.html'),
template: path.resolve(__dirname, '../../public/views/index-template.html'),
inject: false,
chunksSortMode: 'none',
excludeChunks: ['dark', 'light']
excludeChunks: ['dark', 'light'],
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
NODE_ENV: JSON.stringify('development'),
},
}),
// new BundleAnalyzerPlugin({
// analyzerPort: 8889
// })
]
],
});