Understanding this may be a bit challenging, but it seems to be functioning as intended:
package.json
{
"name": "my-lib",
"version": "0.3.0",
"types": "src/index.ts", <-- crucial
...
}
examples/package.json
{
"dependencies": {
"react": "^15.6.1",
"react-redux": "^5.0.5",
"redux": "^3.7.2"
},
"devDependencies": {
"@types/react": "^16.0.0",
"@types/react-dom": "^15.5.1",
"awesome-typescript-loader": "^3.2.2",
"url-loader": "^0.5.9",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}
examples/webpack.config.babel.js
import {ProvidePlugin} from 'webpack';
import {CheckerPlugin, TsConfigPathsPlugin} from 'awesome-typescript-loader';
export default {
context: `${__dirname}/src`,
entry: './index.tsx',
output: {
path: `${__dirname}/src`,
filename: 'bundle.js',
publicPath: '/',
pathinfo: true,
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
test: /\.(jpe?g|png|gif)($|\?)/i,
// include: __dirname,
loader: 'url-loader',
options: {
limit: 1024 * 2,
}
},
]
},
target: 'web',
resolve: {
modules: ['node_modules'],
extensions: ['.tsx', '.ts', '.jsx', '.js'],
plugins: [
new TsConfigPathsPlugin()
],
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new ProvidePlugin({
React: 'react',
}),
new CheckerPlugin(),
]
};
examples/.babelrc
This allows the use of import in the webpack.config.babel.js.
{
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
examples/tsconfig.json
{
"compilerOptions": {
"strict": true,
"importHelpers": false,
"removeComments": false,
"preserveConstEnums": false,
"sourceMap": true,
"inlineSources": true,
"noEmitOnError": false,
"pretty": true,
"outDir": "dist",
"target": "es2017",
"downlevelIteration": false,
"lib": [
"esnext",
"dom"
],
"moduleResolution": "node",
"declaration": true,
"module": "ESNext",
"types": [
"node"
],
"baseUrl": ".", <-- necessary
"paths": {
"my-lib": [
".." <-- enables importing 'my-lib' without npm publishing
]
},
"jsx": "React",
"allowSyntheticDefaultImports": true
},
"files": [
"src/index.tsx"
]
}
examples/Makefile
I prefer using Make over npm scripts.
# these are not files
.PHONY: all clean
# disable default suffixes
.SUFFIXES:
all: yarn.lock
npx webpack-dev-server --hot --inline --colors --port 3123 --content-base src
yarn.lock:: package.json
@yarn install --production=false
@touch -mr $@ $<
yarn.lock:: node_modules
@yarn install --production=false --check-files
@touch -mr $@ $<
node_modules .deps:
mkdir -p $@
clean:
rm -rf node_modules dist
Running
To execute this setup smoothly, navigate to the examples directory and run the command make. This will launch webpack-dev-server, monitor your files, and reload automatically.
Implementing hot loading for React components requires additional steps.