Commit e7e0d18b by Steven Vachon Committed by Dominik Prokop

Babel: use babel-loader instead of ts-loader, ng-annotate with…

Babel: use babel-loader instead of ts-loader, ng-annotate with babel-plugin-angularjs-annotate (#21554)

* Applied prettier to some webpack configs

* Removed ng-annotate

… and used same annotation approach as webpack.hot.js

* Removed redundant import

… that is problematic with Babel's module resolver

* Updated lockfile

* Replace ts-loader with babel-loader in webpack.dev

* Change tslint-loade order in dev webpack config

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
parent 260239d9
......@@ -9,11 +9,13 @@
"url": "http://github.com/grafana/grafana.git"
},
"devDependencies": {
"@babel/core": "7.6.4",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/core": "7.8.3",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
"@babel/plugin-proposal-optional-chaining": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/preset-env": "7.6.3",
"@babel/preset-react": "7.6.3",
"@babel/preset-typescript": "7.6.0",
"@babel/preset-typescript": "7.8.3",
"@emotion/core": "10.0.10",
"@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
"@testing-library/react-hooks": "^3.2.1",
......@@ -105,8 +107,6 @@
"mocha": "4.1.0",
"module-alias": "2.2.0",
"monaco-editor": "0.15.6",
"ng-annotate-loader": "0.6.1",
"ng-annotate-webpack-plugin": "0.3.0",
"ngtemplate-loader": "2.0.1",
"node-sass": "4.12.0",
"npm": "6.13.4",
......
......@@ -6,8 +6,6 @@ import React, { PureComponent } from 'react';
// @ts-ignore
import { default as ReactSelect, Creatable } from '@torkelo/react-select';
// @ts-ignore
import { Creatable } from '@torkelo/react-select/lib/creatable';
// @ts-ignore
import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async';
// @ts-ignore
import { components } from '@torkelo/react-select';
......
......@@ -27,73 +27,99 @@ module.exports = (env = {}) =>
},
module: {
rules: [{
test: /\.tsx?$/,
enforce: 'pre',
exclude: /node_modules/,
use: {
loader: 'tslint-loader',
options: {
emitErrors: true,
typeCheck: false,
}
}
},
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',
'@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
'angularjs-annotate',
],
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
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
// })
]
],
});
......@@ -7,7 +7,7 @@ const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
const IgnoreNotFoundExportPlugin = require('./IgnoreNotFoundExportPlugin.js');
module.exports = merge(common, {
mode: 'development',
......@@ -36,50 +36,56 @@ module.exports = merge(common, {
'!/public/build': 'http://localhost:3000',
},
watchOptions: {
ignored: /node_modules/
}
ignored: /node_modules/,
},
},
optimization: {
removeAvailableModules: false,
runtimeChunk: false,
removeEmptyChunks: false,
splitChunks: false
splitChunks: false,
},
module: {
rules: [{
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
plugins: [
[require('@rtsao/plugin-proposal-class-properties'), {
loose: true
}],
'angularjs-annotate',
'@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
'react-hot-loader/babel',
],
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions'
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
plugins: [
[
require('@rtsao/plugin-proposal-class-properties'),
{
loose: true,
},
useBuiltIns: 'entry',
modules: false
},
],
'angularjs-annotate',
'@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
'react-hot-loader/babel',
],
'@babel/preset-typescript',
'@babel/preset-react',
],
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
modules: false,
},
],
'@babel/preset-typescript',
'@babel/preset-react',
],
},
},
}, ],
],
},
{
test: /\.scss$/,
......@@ -90,13 +96,13 @@ module.exports = merge(common, {
loader: 'postcss-loader',
options: {
config: {
path: __dirname + '/postcss.config.js'
path: __dirname + '/postcss.config.js',
},
},
},
{
loader: 'sass-loader'
}
loader: 'sass-loader',
},
],
},
{
......@@ -113,7 +119,7 @@ module.exports = merge(common, {
template: path.resolve(__dirname, '../../public/views/index-template.html'),
inject: 'body',
alwaysWriteToDisk: true,
chunksSortMode: 'none'
chunksSortMode: 'none',
}),
new HtmlWebpackHarddiskPlugin(),
new webpack.NamedModulesPlugin(),
......
......@@ -4,15 +4,14 @@ const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const common = require('./webpack.common.js');
const path = require('path');
const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
devtool: "source-map",
devtool: 'source-map',
entry: {
dark: './public/sass/grafana.dark.scss',
......@@ -20,33 +19,61 @@ module.exports = merge(common, {
},
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',
'@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
'angularjs-annotate',
],
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
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,
}),
],
},
optimization: {
nodeEnv: 'production',
......@@ -54,40 +81,39 @@ module.exports = merge(common, {
new TerserPlugin({
cache: false,
parallel: true,
sourceMap: true
sourceMap: true,
}),
new OptimizeCSSAssetsPlugin({})
]
new OptimizeCSSAssetsPlugin({}),
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
}),
new MiniCssExtractPlugin({
filename: "grafana.[name].[hash].css"
filename: 'grafana.[name].[hash].css',
}),
new ngAnnotatePlugin(),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/views/error.html'),
template: path.resolve(__dirname, '../../public/views/error-template.html'),
inject: false,
excludeChunks: ['dark', 'light'],
chunksSortMode: 'none'
chunksSortMode: 'none',
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/views/index.html'),
template: path.resolve(__dirname, '../../public/views/index-template.html'),
inject: false,
excludeChunks: ['manifest', 'dark', 'light'],
chunksSortMode: 'none'
chunksSortMode: 'none',
}),
function () {
this.hooks.done.tap('Done', function (stats) {
function() {
this.hooks.done.tap('Done', function(stats) {
if (stats.compilation.errors && stats.compilation.errors.length) {
console.log(stats.compilation.errors);
process.exit(1);
}
});
}
]
},
],
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment