Я обновил свой код, чтобы использовать Babel 7.0 (уже в веб-пакете 4) из Babel 6. Я также переименовал все мои JSX-файлы в TSX - код не изменился.Это приводит к большому количеству ошибок компиляции, когда относительные пути внутри узловых модулей не разрешаются:
ERROR in ./node_modules/moment/locale/eo.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
@ ./node_modules/moment/locale/eo.js 5:50-70
@ ./node_modules/moment/locale sync ^\.\/.*$
@ ./node_modules/moment/moment.js
@ ./src/App.tsx
@ multi ./src/App.tsx
ERROR in ./node_modules/moment/locale/sq.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
@ ./node_modules/moment/locale/sq.js 5:50-70
@ ./node_modules/moment/locale sync ^\.\/.*$
@ ./node_modules/moment/moment.js
@ ./src/App.tsx
@ multi ./src/App.tsx
ERROR in ./node_modules/moment/locale/ss.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
@ ./node_modules/moment/locale/ss.js 5:50-70
@ ./node_modules/moment/locale sync ^\.\/.*$
@ ./node_modules/moment/moment.js
@ ./src/App.tsx
@ multi ./src/App.tsx
ERROR in ./node_modules/moment/locale/sv.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
@ ./node_modules/moment/locale/sv.js 5:50-70
@ ./node_modules/moment/locale sync ^\.\/.*$
@ ./node_modules/moment/moment.js
@ ./src/App.tsx
@ multi ./src/App.tsx
Почти все пакеты, которые мы используем, выдают похожие ошибки, включая 'response-dom', 'реагировать-intlи многое другое.
Добавление моего файла webpack.config :
module.exports = {
context: __dirname,
mode: 'production',
entry: {
app: [ './src/App.tsx' ],
},
watchOptions: {
ignored: /node_modules/
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
devServer: {
contentBase: path.join(__dirname, 'assets'),
compress: true,
port: 1309,
hot: true,
https: false,
noInfo: false,
historyApiFallback: true
},
externals: {
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
module: {
rules: [
{
test: /\.(tsx?|es6\.jsx?)$/,
exclude: path.resolve(__dirname, 'node_modules'),
loader: 'babel-loader?cacheDirectory'
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
}
]
},
{
test: /\.(gif|png|jpg|svg|eot|woff|woff2|ttf|mp4|cur|ico)$/,
loader: 'file-loader'
}
]
},
resolve: {
// needed to not use relative paths in imports
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
],
// extensions that are handled by webpack
extensions: [
'.ts', '.tsx', '*.js', '*.jsx', '.json'
],
alias: {
src: './src'
// external libraries
}
},
output: {
path: __dirname + '/dist',
publicPath: '',
filename: '[name].js'
},
devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
plugins: [
new HtmlWebpackPlugin({ title: 'Test App', template: 'src/index.ejs', inject: 'body' }),
new webpack.ProvidePlugin({"React": "react",}),
new webpack.HotModuleReplacementPlugin(),
]
};
Мой .babelrc файл:
{
"presets":[
"@babel/react",
"@babel/typescript"
],
"plugins":[
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-modules-commonjs"
] }