我正在开发src/
下的Typescript库和examples/
下的示例。目录结构是这样的:
examples/
package.json
exampleFiles.ts
src/
index.ts
package.json
我可以使用these instructions编译库,但我不确定如何同时观察这两个项目,尤其是当一个项目依赖另一个时。
examples/package.json
看起来像这样:
{
"dependencies": {
"my-project": "file:..",
}
}
即,我正在使用file:
依赖项,因此我不必继续将该库发布到npm并重新安装它。我希望这会有所帮助。
如何设置它以便于开发?
答案 0 :(得分:0)
您需要从src包生成DTS文件,并将这些文件提供给示例包。一种方法是在每个包中创建一个tsconfig.json。
答案 1 :(得分:0)
这有点复杂,但这似乎有效:
{
"name": "my-lib",
"version": "0.3.0",
"types": "src/index.ts", <-- important
...
}
{
"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"
}
}
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(),
]
};
只允许我们在import
中使用webpack.config.babel.js
。
{
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
{
"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": ".", <-- needed
"paths": {
"my-lib": [
".." <-- allows us to `import 'my-lib'` without having to publish it to npm first
]
},
"jsx": "React",
"allowSyntheticDefaultImports": true
},
"files": [
"src/index.tsx"
]
}
我喜欢使用Make代替npm脚本。
# 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
通过所有这些,您应该能够cd
进入示例目录并运行make
。它将启动webpack-dev-server,观察您的文件并自动重新加载。
React组件热负载还有一些工作要做。