提取index.html,如何将React JS index.js文件与index.html联系以获取id引用？

Aftab Khan..

111

Create-React-App 是非常有趣的设置.

我从package.jsonnpm脚本开始挖掘start

"开始":"react-scripts启动"

这将我带到他们的二进制文件react-scripts,node_modules/.bin

我将在这里发布相关的东西.

switch (script) {

case 'build':

case 'eject':

case 'start':

case 'test': {

const result = spawn.sync(

'node',

[require.resolve('../scripts/' + script)].concat(args),

{ stdio: 'inherit' }

);

所以这告诉我他们正在寻找../scripts/文件夹内的脚本.

所以我转到react-scripts npm模块(node_modules/react-scripts)并打开node_modules/react-scripts/scripts/start.js文件,因为我正在做npm start.

现在我在这里找到了我正在寻找的webpack配置.

他们特指node_modules/react-scripts/config/webpack.config.dev.js.我会在这里发布相关内容.

entry: [

// Finally, this is your app's code:

paths.appIndexJs,

],

plugins: [

// Generates an `index.html` file with the

new HtmlWebpackPlugin({

inject: true,

template: paths.appHtml,

}),

所以引用的paths.appIndexJs文件是webpack配置中的条目文件.

他们正在使用HtmlWebpackPlugin在路径上加载html paths.appHtml.

拼图的最后一部分是将其链接到您发布的文件.发布相关内容paths.js

const appDirectory = fs.realpathSync(process.cwd());

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {

...

appHtml: resolveApp('public/index.html'),

appIndexJs: resolveApp('src/index.js'),

...

}

所以在你的应用程序目录中,

appHtml是文件public/index.html

appIndexJs是文件src/index.js

你的两个文件有问题.

哇!这是一段相当艰难的旅程..:P